Vue3 的编译优化之靶向更新（PatchFlags 与动态节点收集）原理

题目描述
靶向更新是 Vue3 编译阶段的核心优化策略之一，它通过编译时静态分析模板，标记动态节点类型（如动态 class、style、props 等），并在运行时结合 PatchFlag 枚举值实现精准的 Diff 更新，避免全量对比虚拟 DOM。这一机制如何通过编译器和渲染器协同工作？动态节点如何被收集并映射到 PatchFlag？运行时如何利用这些信息优化更新性能？

解题过程

1. 编译阶段：模板静态分析与动态节点标记

   • Vue3 的编译器解析模板时，会遍历 AST（抽象语法树），识别节点的动态绑定（如 :class、v-if、{{ text }}）。
   • 对于每个元素节点，编译器会分析其属性的动态性：
     • 静态属性（如 id="app"）不参与更新，直接提升到渲染函数外。
     • 动态属性被分类为特定类型（如 CLASS、STYLE、PROPS、TEXT等），并分配对应的 PatchFlag 位掩码（如 1 /* TEXT */、2 /* CLASS */）。
   • 关键步骤：编译器将动态子节点收集到节点的 dynamicChildren 数组中，这样运行时只需对比动态节点，而非整个子树。

2. 代码生成：生成带 PatchFlag 的渲染函数

   • 编译器生成渲染代码时，会为每个动态节点添加 patchFlag 属性，例如：

     createElementVNode("div", { class: _normalizeClass(userClass) }, null, 2 /* CLASS */)  
     

   • 对于包含动态子节点的元素，会标记 DYNAMIC_SLOTS 标志，并生成 block 节点（如 openBlock()、createElementBlock()），其 dynamicChildren 数组存储所有动态子节点。

3. 运行时：PatchFlag 指导 Diff 优化

   • 当组件更新时，渲染器的 patchElement 函数会检查新旧节点的 patchFlag：
     • 若标志存在，则按需执行靶向更新：
       • 例如 patchFlag & PatchFlags.CLASS 为真时，仅对比和更新 class 属性。
     • 若节点是 block 节点（如 Fragment 或带动态子元素的元素），则直接遍历 dynamicChildren 数组，递归调用 patch 函数，跳过静态节点。
   • 优势：对比传统 Diff 算法需要递归整个子树，靶向更新仅处理动态节点，时间复杂度从 O(n) 降至 O(动态节点数)。

4. 动态节点收集与 Block Tree 协同

   • 结构化的指令（如 v-if、v-for）会创建嵌套的 block 节点，形成 Block Tree。
   • 每个 block 负责收集其直接动态子节点，更新时从根 block 开始逐层靶向更新，确保动态结构的准确性。

总结
靶向更新的本质是编译时预计算动态节点信息，运行时通过 PatchFlag 和动态节点集合跳过静态内容。这种设计将耗时的分析工作前置到编译阶段，减轻运行时压力，是 Vue3 性能超越 Vue2 的关键之一。