Skip to main content

How does Vue optimize the Virtual DOM?

VueJunior~2 min read
Suggest an edit

1. Compile-time optimization

The Vue compiler analyzes the template and marks parts that do NOT change as static nodes.

This means:

  • static parts never take part in diffing at all
  • they are created once and never checked again
  • their virtual nodes are never recreated

Example:

vue
<div> <h1>Title</h1> <!-- static --> <p>{{ message }}</p> <!-- dynamic --> </div>

Vue marks <h1> as a static node.

It won't take part in comparison and updates.

This significantly shrinks the diff tree.

2. Patch flags (Vue 3)

The main innovation of Vue 3.

During compilation, Vue adds special flags:

  • TEXT - only the text changes
  • PROPS - only specific props change
  • CLASS - only the class changes
  • STYLE - only styles change

This lets Vue skip comparing the whole virtual node and apply a specific update right away, bypassing diffing.

Example of a virtual node with a flag:

js
// Vue knows only the text changes createVNode("p", null, message, PatchFlags.TEXT)

Diffing is performed surgically, not for the whole tree.

3. Block Tree

Vue 3 uses a block structure that:

  • groups dynamic parts together
  • excludes static subtrees
  • minimizes the number of compared nodes

This is a huge optimization that React does not have.

The idea:

Dynamic elements are tracked separately, while the static tree never takes part in diffing at all.

This dramatically reduces the work the comparison algorithm has to do.

4. Hoisting: lifting static nodes out

Static elements are "hoisted" outside the render and created only once:

js
const _hoisted_1 = /*#__PURE__*/ createVNode(...)

The render function:

  • does not recreate the node
  • does not compare it
  • uses a pre-created cache

Fewer object creations → less GC → faster rendering.

5. Memoization (v-memo)

Vue can cache template fragments:

vue
<div v-memo="[count]"> {{ expensiveComputation }} </div>

If count hasn't changed → Vue skips the diff for the whole section.

6. List optimization through keys (v-for + key)

Vue compares lists efficiently when you provide a key:

vue
<li v-for="item in list" :key="item.id">

The algorithm:

  • moves elements minimally
  • avoids unnecessary re-renders
  • uses O(n) optimizations

Without keys, performance drops.

7. Reactive refs and reactive → targeted updates

Vue 3 uses proxy-based reactivity:

  • only the specific field is updated
  • only the specific watcher runs
  • only the necessary component renders
  • only the necessary piece of the VDOM updates

This minimizes how often rendering runs.

8. Tree-shaking and build optimization

Vue 3 is fully tree-shakable:

  • unused functions don't end up in the bundle
  • less code → faster loading → faster rendering

Short Answer

Interview ready
Premium

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

Suggest an edit