Block and Block Tree: SFC Compilation Optimization in Vue3

I. Problem Description
In Vue3's compilation optimization, Block and Block Tree are the core data structures for dynamic node collection. Through static analysis at compile time, they divide the template into dynamic and static regions, achieving precise targeted updates. This mechanism solves the performance waste problem of full-tree comparison in traditional virtual DOM Diff.

II. Core Concept Analysis

1. Definition of Block

   • A Block is a special virtual node that contains an array of dynamic child nodes (dynamicChildren).
   • Only nodes with structural directives (v-if/v-for) create a Block.
   • Each Block collects all dynamic descendant nodes within it (not limited to direct children).

2. Hierarchical Structure of Block Tree

   • The root template forms a root Block.
   • Nested v-if/v-for creates nested Blocks, forming a tree structure.
   • The parent Block collects the dynamic nodes of child Blocks but does not expand the internal structure of child Blocks.

III. Static Analysis Process at Compile Time

1. Dynamic Identifier Injection

   <!-- Source Code -->
   <div>
     <span>{{ name }}</span>
     <p :class="cls">{{ value }}</p>
   </div>
   

   After compilation, PatchFlags (e.g., TEXT/PROPS/CLASS) are marked on the virtual nodes.

2. Block Collection Logic

   • The compiler identifies the dynamic parts of the template.
   • Creates a new Block context when encountering v-if/v-for.
   • Recursively traverses and stores references to dynamic nodes in the current Block's dynamicChildren.

IV. Runtime Update Optimization

1. Patch Phase Comparison Optimization

   // Traditional Diff: Full-tree comparison
   patch(oldVNode, newVNode, container)
   
   // Block Tree Optimization: Compare only dynamic nodes
   patchBlock(oldBlock, newBlock, container)
   

2. Targeted Update Process

   • During comparison, directly traverse the dynamicChildren array.
   • Execute targeted updates based on PatchFlag (e.g., update only text/class).
   • Completely skip comparison for static nodes.

V. Handling Mechanism for Nested Blocks

1. Tree Structure Maintenance

   <div>  <!-- Root Block -->
     <div v-if="show">  <!-- Child Block -->
       <span>{{ value }}</span>  <!-- Dynamic Node -->
     </div>
   </div>
   

   • The root Block's dynamicChildren contains references to child Blocks.
   • Child Blocks internally maintain their own lists of dynamic nodes.

2. Tree Traversal During Updates

   • Start depth-first traversal from the root Block.
   • Recursively execute patchBlock when encountering child Blocks.
   • Ensure correct update order for nested structures.

VI. Performance Advantages

1. Time Complexity Optimization

   • Traditional Diff: Optimized from O(n³) to O(n).
   • Block Tree: The number of dynamic nodes is much smaller than the total number of nodes, with actual complexity O(m) (where m is the number of dynamic nodes).

2. Memory Usage Optimization

   • Only references to dynamic nodes need to be cached; there's no need to clone the entire virtual tree.
   • Reduces GC pressure and improves memory efficiency.

VII. Practical Application Scenarios

1. Conditional Rendering Optimization

   • v-if/v-else creates independent Blocks.
   • Directly compare the dynamic nodes of two Blocks during switching.

2. List Rendering Optimization

   • Each item in v-for creates a Block.
   • Works with Fragment to achieve minimal updates.

This design allows Vue3 to determine the dynamic structure of the template at compile time, enabling direct targeted updates at runtime and significantly improving rendering performance.