Free tools Windows power users keep installed
One-click scans. No signup required.
Vue’s computed() caches the last value its getter returned. It reruns the getter only after a reactive dependency the getter read has changed, and only when something next needs the value. Reading the computed repeatedly while those dependencies are unchanged reuses the stored result.
What the cache is keyed on
The cache is not keyed on time, call count, or every value the getter happens to touch. It is keyed on reactive dependencies: while the getter runs, Vue records which reactive state it reads. Only changes to that state invalidate the result. The official Vue guide, “Computed Properties”, puts it this way:
As an Amazon Associate I earn from qualifying purchases.
“A computed property will only re-evaluate when some of its reactive dependencies have changed.”
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallSpecial offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Two details follow from this:
- Invalidation is not recomputation. A dependency change marks the old value stale. The getter runs again only when the value is next accessed, or when an effect that depends on it (such as a render) needs it. Repeated reads before any relevant change use the cached result.
- Non-reactive reads do not count. A plain variable, or a value that is not part of Vue’s reactivity system, cannot invalidate the computed value, even if it changes.
A minimal example
import { ref, computed } from 'vue'
const items = ref([3, 5, 8])
const total = computed(() => {
console.log('getter ran')
return items.value.reduce((a, b) => a + b, 0)
})
total.value // logs "getter ran", returns 16
total.value // cached: no log
total.value // cached: no log
items.value.push(4) // marks total stale; nothing runs yet
total.value // logs "getter ran", returns 20In JavaScript, a computed ref is read through .value; templates unwrap it automatically. In the Options API, a computed property is consumed like an ordinary instance property (this.total).
#1 Best Overall
How Vue knows what to track
When a reactive property is read during an active reactive effect, Vue records that effect as a subscriber of the property. A later mutation notifies those subscribers. According to the “Reactivity in Depth” guide, computed invalidation and recomputation are managed internally by a reactive effect. The guide’s own pseudo-code is illustrative and omits details and edge cases, so treat it as a mental model, not the exact implementation.
Don’t think of the cache as a permanent memo table. Its lifetime is the computed value’s dependency state: unchanged dependencies mean the result can be reused; changed dependencies mean it will be recomputed when a consumer asks.
Computed versus method
| Choice | What happens | Good fit |
|---|---|---|
computed / computed() |
Caches a derived value until a reactive dependency changes; repeated access can reuse it. | Pure values derived from reactive state, especially when reused or relatively expensive. |
| Method | Runs every time it is invoked. In a template, that means whenever a render calls it. | Work that must be fresh on each call, or logic that should not be cached. |
Methods are not inherently wasteful; the difference is execution semantics. The official guide’s explanation of the performance benefit is qualitative: caching avoids repeating getter work, notably when other computed values depend on an expensive one. It gives no benchmark, so don’t assume a specific speedup.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteA quick way to choose
- Is the result derived from reactive state? If not, computed has nothing to track.
- Do you want repeated reads to share one result? Choose computed.
- Must every call produce fresh work? Choose a method.
- Does the code cause side effects? Keep it out of a computed getter, which should derive and return a value.
Why computed(() => Date.now()) never updates
const now = computed(() => Date.now())The getter reads no reactive state, so Vue has nothing to subscribe to. Time passing is not a reactive mutation, so the first value is returned indefinitely. The official guide uses this exact case as its example. Two fixes:
- Call a method when you want a fresh reading at that moment.
- Keep a reactive “tick” (for example a
refupdated on an interval) and read it inside the computed getter, so each tick invalidates the result.
Why a computed value might not update
- The getter reads no reactive source, as with
Date.now()or a plain non-reactive variable. - The value was copied out of reactivity before the getter used it, so later changes never touch tracked state.
- You are reading a stale copy of the computed result stored elsewhere, rather than reading the computed itself.
For debugging, the “Reactivity in Depth” guide covers development-only hooks for inspecting computed tracking and triggering.
Writable computed
Computed properties are getter-only by default, and assigning to one produces a runtime warning. For a two-way interface, supply a getter and a setter. The setter should write to the underlying refs or state, not try to mutate the computed result.
const first = ref('Ada')
const last = ref('Lovelace')
const fullName = computed({
get: () => first.value + ' ' + last.value,
set: (v) => {
;[first.value, last.value] = v.split(' ')
}
})
fullName.value = 'Grace Hopper' // updates first and lastReading the previous value (Vue 3.4+)
From Vue 3.4, the getter receives the previous result. In the Composition API it is the first argument; in the Options API it is the second argument, after the conventional this context (so an arrow-less function receiving (vm, previous) style as shown in the official guide). Check your Vue version before relying on it.
const count = ref(2)
const limited = computed((previous) => {
return count.value <= 3 ? count.value : previous
})Vue 2 versus Vue 3
The principle is the same in the Vue 2 and current guides: computed values cache on reactive dependencies, and non-reactive Date.now() cannot trigger an update. The mechanics differ. Vue 2 used getter/setter observation, while Vue 3 uses proxies for reactive objects and getter/setters for refs.
Vue 2 had a cache: false option for computed properties. The Vue 2 migration notes deprecated it and pointed to methods for uncached behavior, which is also what the current guide recommends. It is legacy context only; don’t apply Vue 2 configuration advice to Vue 3 code.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
