Skip to main content

Why is computed essentially a memoized getter?

VueJunior~1 min read
Suggest an edit

computed in Vue is essentially a memoized getter, because it:

  1. has a computing function (getter)
  2. caches the result
  3. recalculates the value only when its dependencies change

In other words, it doesn't work like a plain function but like a memoized one, tracking reactive sources.

Let's break it down point by point.

1. computed has a get function

When you write:

js
const fullName = computed(() => user.first + ' ' + user.last)

You're essentially defining a getter:

  • it doesn't store anything by itself
  • it computes a value when accessed
  • it's tied to reactive dependencies (user.first, user.last)

2. computed caches the result (memoization)

The first time computed is called, Vue:

  1. computes the value,
  2. stores it inside the computed object,
  3. does not call the computing function again until the dependencies change.

So the next render does NOT call the function again.

Check it:

js
const count = ref(0) const doubled = computed(() => { console.log('computed recalculated') return count.value * 2 }) doubled.value // logs: "computed recalculated" doubled.value // nothing is logged - it comes from the cache!

3. computed recalculates only when its dependencies change

Vue automatically tracks the reactive dependencies inside the getter.

If a dependent variable changes:

js
count.value++

then computed:

  • gets marked as "dirty"
  • the getter runs again on the next access

This is classic memoization: recalculate only if the arguments changed.

4. computed updates lazily (lazy evaluation)

This is an important part of memoization.

Computed does NOT recalculate immediately when a dependency changes. It recalculates only when someone accesses .value.

For example:

js
count.value++

does not trigger a recalculation. But:

js
doubled.value

does trigger a recalculation (if the dependency changed).

5. computed behaves like a "self-invalidating cache"

This is the most precise definition:

computed is a cached getter that automatically invalidates itself when its dependencies change.

In other words:

  • there's a cache
  • there's a dependency
  • there's an automatic check
  • there's a recalculation when needed

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit