Vue 3 Compiler: The Role of 'Block Tree' in Optimizing Re-renders

A 'Block' is a section of a template with a stable internal structure; the compiler uses them to skip diffing static elements entirely.

In Vue 2, the diffing algorithm was recursive across the entire tree. Vue 3 templates are partitioned into 'Blocks' (usually created by structural directives like v-if or v-for). Within a block, the compiler tracks only the dynamic nodes in a flat array. When an update occurs, Vue iterates through this flat array instead of the full tree. This is called 'Block Tree' optimization, and it ensures that the diffing cost is proportional to the amount of dynamic content, not the total number of nodes.