Vue3 Compilation Optimization: Dynamic Node Collection and PatchFlag Collaboration Principle

Description
Vue3's compilation optimization achieves targeted updates through the collaborative work of dynamic node collection and PatchFlag. During the template compilation phase, the compiler analyzes dynamic parts within the template (such as dynamic attributes, dynamic text), marks each dynamic node with a PatchFlag (patch flag), and collects these dynamic nodes into a Block. During updates, PatchFlags are used to quickly identify the type of node changes, allowing for comparison of only the dynamic content and skipping the comparison of static nodes, thereby improving diff efficiency.

Process

1. Template Compilation Phase: Analyze Dynamic Bindings

   • When parsing the template, the compiler identifies dynamic content, such as {{ text }} (dynamic text), :class="cls" (dynamic attribute), v-if (dynamic structure).
   • For each dynamic node, a unique PatchFlag value is assigned based on its dynamic type (e.g., 1 for text dynamic, 2 for class dynamic).
   • Example:

     <div :class="cls">{{ text }}</div>  
     

     After compilation, the div node is marked with a PatchFlag of 3 (1 | 2, a bitwise OR combination of text and class dynamics).

2. Dynamic Node Collection and Block Generation

   • The compiler defines root nodes and nodes wrapped by v-if/v-for as a Block.
   • A Block collects all dynamic child nodes within it (including nested dynamic nodes), forming a dynamic node array (dynamicChildren).
   • Static nodes are not collected into dynamicChildren and are skipped during updates.
   • Example:

     <div>  
       <span>{{ a }}</span>  
       <p>Static Text</p>  
       <span>{{ b }}</span>  
     </div>  
     

     After compilation, the div acts as a Block. Its dynamicChildren contains only the two dynamic span nodes, and the static p node is excluded.

3. PatchFlag's Collaborative Role in the Update Phase

   • When a component updates, the renderer compares the old and new virtual DOM trees.
   • For Block nodes, it directly traverses their dynamicChildren array, comparing only the dynamic nodes, without needing to recursively traverse the entire subtree.
   • Based on each dynamic node's PatchFlag, targeted updates are performed:
     • If the PatchFlag includes text dynamics (1), only the node's textContent is updated.
     • If it includes class dynamics (2), only the class attribute is updated.
     • Bitwise AND operations (e.g., flag & 1) are used to quickly determine the update type.
   • Example:
     If the value of a in the above div changes, the renderer directly finds the first span node and, based on its PatchFlag (1), updates only its text content, skipping the comparison of the static p and the second span.

4. Performance Optimization Impact

   • Through dynamic node collection, the scope of Diff is reduced from the entire tree to a list of dynamic nodes, lowering the time complexity from O(n) to O(number of dynamic nodes).
   • PatchFlag refines the update logic, avoiding unnecessary attribute or text comparisons and reducing JavaScript execution overhead.
   • Combined with other optimizations like static hoisting (where static nodes are hoisted outside the render function), overall rendering performance is significantly improved.

Summary
The collaboration between dynamic node collection and PatchFlag is at the core of Vue3's compilation optimization. By analyzing and marking dynamic content at compile time and performing targeted updates at runtime, it minimizes the cost of the Diff process, implementing an efficient re-rendering mechanism.