Skip to main content

What is memoization in the context of Vue?

VueJunior~1 min read
Suggest an edit

Memoization in the context of Vue is an optimization technique where the result of a computation is cached, and on re-render Vue uses the cached value if the input data has not changed.

Put simply:

Memoization lets Vue avoid recalculating and re-rendering fragments if their dependencies stayed the same.

In Vue this applies to:

  • computed
  • v-memo
  • compiler optimizations (patch flags & block tree)
  • functions in the Composition API

1. Memoization in computed()

computed is a cached computed function.

Example:

js
const fullName = computed(() => { console.log('computed called') return user.first + ' ' + user.last })

Even across multiple renders:

  • the calculation happens only once
  • it is recalculated only when the dependencies change

This is the primary example of memoization.

2. Template memoization via v-memo (Vue 3)

Vue 3 provides the v-memo directive, which lets you cache template fragments:

vue
<div v-memo="[id]"> {{ expensiveCalculation }} </div>

The block re-renders only if id has changed.

If not, Vue skips the diff entirely.

3. Memoization at the Virtual DOM level (patch flags + block tree)

Vue 3 compiles the template so that:

  • static nodes are hoisted into a cache (hoisting)
  • dynamic nodes are marked with patch flags
  • blocks (block tree) only include elements that can change

The result:

Vue "memoizes" static elements and does not check them during diffing.

Essentially, this is template memoization at the Virtual DOM level.

4. Memoization with shallowRef / markRaw

When there is a heavy object that should not trigger a re-render:

js
const chart = shallowRef(null) // or const engine = markRaw(new HeavyEngine())

Vue memoizes the object, tracking only the top level, not the whole structure.

5. Memoization of functions in the Composition API

Functions that return reactive data (composables) can also be memoized, for example calling them once and reusing the result instead of recreating it.

Why is memoization needed in Vue?

To reduce:

  • the number of calculations
  • the number of re-renders
  • the load on the Virtual DOM
  • watcher execution time
  • patch navigation time

And to increase:

  • FPS
  • UI update speed
  • application responsiveness

Short Answer

Interview ready
Premium

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

Suggest an edit