What is the block tree (Vue 3)?

The block tree is an internal optimization structure in Vue 3 that significantly reduces the amount of Virtual DOM being compared and speeds up rendering.

It's one of the key reasons Virtual DOM in Vue 3 works faster than in Vue 2, and faster than in React before Server Components appeared.

In other words:

The block tree is a tree of blocks where Vue separates the dynamic parts of a template from the static ones and updates only the nodes that can actually change.

---

#Why is the block tree needed?

In Vue 2 and the classic Virtual DOM approach, diffing compared the ENTIRE tree, even nodes that were guaranteed never to change.

Expensive? Yes.

Vue 3 solved this problem.

---

#How does the block tree work?

When Vue 3 compiles a template, it:

1. Analyzes the whole template
2. Builds a tree of blocks - each block contains only dynamic nodes
3. Static nodes are moved outside the block and no longer take part in the diff

The result:

• the diff runs only over dynamic nodes
• static ones aren't checked at all
• performance goes up sharply

---

#An example to make this clear

#Template:

Vue analyzes:

• <h1> - static
• <p>{{ message }} - dynamic (TEXT)
• <button @click="inc"> - dynamic (EVENT)

And creates a block:

And <h1> is placed outside the block.

Now, on update, Vue will compare and patch ONLY <p> and <button>. <h1> is ignored entirely (even if there were 1000 such elements).

---

#Why is this faster?

Because:

#Before Vue 3:

Diff -> a recursive comparison of the ENTIRE DOM tree.

#Vue 3 + block tree:

Diff -> a comparison of only the dynamic nodes.

This can be a 10x difference on large components.

---

#An important detail: the block tree is the base for patch flags

The block tree works together with patch flags:

• TEXT
• PROPS
• CLASS
• STYLE
• EVENT
• and so on

Vue knows exactly which parts of a node can change.

No need for a full diff, so the work is targeted.

---

#Real benefits of the block tree

#Much less work when updating the DOM

Only the dynamic parts, no unnecessary checks.

#Less garbage in memory

Static nodes are created once and cached.

#Faster rendering and re-rendering

Especially in components with:

• large tables
• lists
• heavy UI
• layout components

#The foundation of Vue 3's compiler optimizations

The block tree lets Vue's compiler be "smart."