Vue3通过Block机制提升diff性能：编译时标记动态节点并归入Block，运行时仅遍历dynamicChildren数组精准patch，跳过静态节点。

动态节点在 Vue3 中的识别逻辑

Vue3 不再为每个节点单独打补丁，而是通过 Block（块）机制 将模板编译为带“动态标志”的嵌套结构。所谓动态节点，指的是其属性、子内容或绑定值在运行时可能变化的节点——比如 v-if、v-for、:class、{{ msg }} 等。Vue3 在编译阶段就静态分析出哪些节点需要响应式更新，并将它们标记为 DYNAMIC_CHILDREN、NEED_PATCH 或 TEXT 等 flag。

Block 是如何收集动态子代的？

每个 Block 是一个虚拟节点（VNode）容器，它自身不渲染，只负责组织和调度其内部的动态子节点。关键在于：Block 的 children 数组中只保留真正需要运行时更新的子节点，静态节点会被跳过、折叠或提前固化。

• 编译器会遍历 AST，遇到动态绑定（如 :id="id"）、指令（如 v-show）、插值（如 {{ count }}）时，将该节点及其所有祖先节点逐级标记为“dirty”，并最终归入最近的 Block 范围
• 一个 Block 的 dynamicChildren 字段（内部字段，非公开 API）会在 patch 阶段被初始化，它是一个扁平数组，只包含当前 Block 下所有需 diff 的子 VNode 引用
• 当响应式依赖触发更新时，Vue 不会遍历整个 children 树，而是直接遍历 dynamicChildren 数组做精准 patch，跳过静态节点和未变更的动态节点

为什么 Block 能提升 diff 性能？

传统 VDOM diff 需要递归对比整棵树，而 Block 把“可变区域”显式隔离出来，形成轻量级更新边界：

Vue Wrap

Vue 入门指南 — JavaScript 框架

下载

• 静态内容（如纯 HTML 文本、无绑定的 div）在首次挂载后就固化，后续更新完全跳过
• 同一个 Block 内的多个动态节点共享更新上下文，例如多个 {{ a }} 和 {{ b }} 同时变化时，只触发一次 Block 级 patch，避免重复定位父节点
• 结合 patchFlag（如 PATCHED、TEXT），每个动态子节点知道自己只需比对哪部分（props？children？text？），无需通用 diff 算法

开发者能感知或影响 Block 行为吗？

大多数情况下不需要手动干预，但理解机制有助于写出更高效的模板：

• 避免在静态内容中混入无意义绑定，例如
  {{ '' }}
  会让该节点被误判为动态，进入 Block
• 使用 替代包裹用的
  ，减少不必要的 DOM 节点和 Block 嵌套层级
• 在大型列表中，合理使用 key 并保持 key 的稳定性，确保 Block 能正确复用 dynamicChildren 数组中的节点引用