Vue3 SFC Compilation Optimization: Co-update Principle of Dynamic Children Blocks and Fragments

Description:
When compiling Single File Components (SFCs), Vue3 performs special processing on dynamic children within the template, enabling efficient targeted updates in conjunction with Fragments. This optimization works by marking the block containing dynamic children and, during updates, comparing only the dynamic parts, thus avoiding full recursive Diff operations and improving performance. The core concepts involve understanding how dynamic children are collected, the role of Fragments, and the synergistic mechanism between them during the update process.

Step-by-Step Explanation of the Solution Process:

1. Concept and Identification of Dynamic Children
Dynamic children refer to nodes within the template that may change due to reactive data updates, typically generated by directives such as v-if, v-for, dynamic slots, or those containing dynamic bindings (e.g., :class, @click). For example:

<template>
  <div>
    <span v-if="show">Dynamic Text</span>
    <p v-for="item in list">{{ item.name }}</p>
  </div>
</template>

During template parsing, the compiler marks dynamic nodes using PatchFlag. The key point here is: when a parent node has multiple dynamic children, these child nodes need to be organized into a "dynamic children list."

2. Collection of Dynamic Children and the Role of Blocks
Vue3's compiler marks a parent node that contains dynamic children as a "Block". A Block is a special type of Virtual Node (VNode) that internally maintains a dynamic children array called dynamicChildren. The collection process occurs during the compilation phase:

• Traverse the AST (Abstract Syntax Tree) to identify parent nodes with dynamic children.
• Store the creation functions of dynamic children in the parent node's dynamicChildren array.
• Simultaneously, the parent node is marked with flags from PatchFlags, such as DYNAMIC_SLOTS or DYNAMIC_CHILDREN, indicating that its children require dynamic updates.

For example, after compiling the template above, the generated render function looks roughly like this:

import { openBlock, createBlock, createVNode, Fragment } from 'vue'

function render(_ctx) {
  return (openBlock(), createBlock('div', null, [
    _ctx.show
      ? createVNode('span', null, 'Dynamic Text')
      : null,
    // Dynamically generated children from v-for are also collected
  ]))
}

Here, createBlock implicitly enables dynamic children collection mode.

3. Fragment as a Container for Dynamic Children
When dynamic children are positioned directly at the template root or are adjacent to each other, Vue3 uses a Fragment as a container to wrap them. For example:

<template>
  <span v-if="show">A</span>
  <p v-for="item in list">{{ item }}</p>
</template>

After compilation, the root node will be a Fragment, and its dynamicChildren will contain the creation functions for the <span> and all <p> elements. A Fragment itself is a virtual node without an actual HTML tag, serving only for logical grouping.

4. Collaborative Working Mechanism During Updates
During the component update phase, the renderer executes the patch function to compare the old and new virtual DOM. When it encounters a Block node:

• The renderer checks the Block's dynamicChildren array.
• It performs patch comparisons only on the dynamic children within dynamicChildren, skipping all static children.
• For Fragment-type Blocks, which have no actual DOM element, the renderer directly traverses its dynamicChildren to update the list of child nodes without processing the Fragment itself.

For example, when updating the list in the v-for example above:

• Only the dynamic child creation functions corresponding to v-for are re-executed to generate a new array of child nodes.
• The old and new dynamicChildren arrays are compared (using a key-based Diff algorithm) to update the DOM.
• Static child nodes (e.g., <div> without dynamic bindings) are entirely skipped during comparison.

5. Collaborative Optimization with PatchFlag
The dynamic children block optimization complements PatchFlag:

• PatchFlag marks dynamic attributes of individual nodes (e.g., class, style), enabling attribute-level targeted updates.
• Dynamic children blocks mark collections of all dynamic child nodes under a parent node, enabling child list-level targeted updates.
  Combined, these optimizations narrow the update granularity from the "entire subtree" to "specific dynamic attributes or dynamic child lists."

6. Performance Advantages

• Reduced Recursive Traversal: Static subtrees are completely skipped during updates, eliminating the need to create virtual nodes or perform Diff operations.
• Precise Updates: Comparing dynamic children lists is faster than performing full subtree Diff operations, particularly optimizing scenarios like v-for list changes (e.g., sorting, insertion).
• Memory Efficiency: Virtual nodes of static children are cached and reused after the initial render, reducing garbage collection pressure.

Summary:
Through compile-time analysis, Vue3 collects dynamic children into the parent Block's dynamicChildren array, leveraging Fragments as lightweight containers. During updates, only targeted comparisons are performed on the dynamic children list. This mechanism is a vital part of Vue3's compilation optimizations, working in synergy with PatchFlag, static hoisting, and other techniques to achieve highly efficient runtime update performance.