Skip to content

Commit 6f56459

Browse files
frandioxchrisvfritz
authored andcommitted
cache option for computed properties. (vuejs#722)
* `cache` option for computed properties. I think the `cache` options works in Vue 2 but I could not find any information in the docs. * Computed tweaks and alternative to cache: false
1 parent e1eded4 commit 6f56459

File tree

1 file changed

+4
-2
lines changed

1 file changed

+4
-2
lines changed

src/v2/api/index.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -439,15 +439,17 @@ type: api
439439

440440
### computed
441441

442-
- **Type:** `{ [key: string]: Function | { get: Function, set: Function } }`
442+
- **Type:** `{ [key: string]: Function | { get: Function, set: Function, cache: Boolean } }`
443443

444444
- **Details:**
445445

446446
Computed properties to be mixed into the Vue instance. All getters and setters have their `this` context automatically bound to the Vue instance.
447447

448448
<p class="tip">Note that __you should not use an arrow function to define a computed property__ (e.g. `aDouble: () => this.a * 2`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.a` will be undefined.</p>
449449

450-
Computed properties are cached, and only re-computed on reactive dependency changes.
450+
Computed properties are cached, and only re-computed on reactive dependency changes. Note that if a certain dependency is out of the instance's scope (i.e. not reactive), the computed property will not be updated. In this situation, caching can be turned off by setting `cache: false`. However, since the dependency is still not reactive, modifying it will not trigger a DOM update.
451+
452+
In most situations, `cache: false` will not be an ideal solution. Whenever possible, it's much better to pull external data into the reactivity system. For example, if a computed property depends on the size of the window, you can store this information in `data`, then use the `resize` event to keep the value up-to-date. Now it's reactive!
451453

452454
- **Example:**
453455

0 commit comments

Comments
 (0)