Suggest an editImprove this articleRefine the answer for “What is the block tree (Vue 3)?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)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. **Key point:** Vue separates the dynamic parts of a template from the static ones and updates only the nodes that can actually change.Shown above the full answer for quick recall.Answer (EN)ImageThe **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 <div> <h1>Title</h1> <p>{{ message }}</p> <button @click="inc">+</button> </div> ``` Vue analyzes: - `<h1>` - static - `<p>{{ message }}` - dynamic (TEXT) - `<button @click="inc">` - dynamic (EVENT) And creates a block: ``` Block { dynamicChildren: [ p (TEXT), button (EVENT) ] } ``` 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."For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.