Suggest an editImprove this articleRefine the answer for “How does Vue optimize the Virtual DOM?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)The Vue compiler analyzes the template and marks parts that **do not change** as static nodes, and Vue 3 adds patch flags, a block tree, hoisting, and memoization for targeted updates. **Key point:** static parts never take part in diffing, so only what can actually change gets compared.Shown above the full answer for quick recall.Answer (EN)Image## 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 renderingFor the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.