Block通过编译期静态分析识别动态节点并打patchFlag,运行时借助openBlock/createBlock协同维护blockStack与currentBlock,将所有动态子代(含后代)扁平化收集至dynamicChildren数组,更新时仅遍历该数组实现精准patch,跳过全部静态节点。

Block 能收集动态子代,核心在于 Vue3 编译器与运行时协同建立的一套“动态节点追踪栈”机制。它不是靠运行时遍历判断,而是在模板编译阶段就静态识别动态性,并在生成渲染函数时,通过 openBlock 和 currentBlock 的配合,将动态节点实时“捕获”并归入当前 Block 的 dynamicChildren 数组。
动态性在编译期就被标记清楚
Vue3 编译器会扫描 AST,一旦遇到以下情况,就认定该节点具有动态性:
- v-if / v-else-if / v-else 指令
- v-for 指令
- {{ }} 插值(对应
PATCH_FLAGS.TEXT) - :class、:style、:id 等绑定属性(对应
CLASS、STYLE、PROPS等 flag) - v-show、v-bind 动态指令
这些节点会被打上 patchFlag,并被标记为“需 patch”。更重要的是,它们的父级容器(如包含 v-if 的 div、根节点、template 标签等)会被指定为 Block 容器。
openBlock 启动一个收集上下文
每个 Block 创建前,都会先调用 openBlock()。它的作用是:
- 新建一个空数组,作为当前 Block 的动态子节点暂存区
- 把这个数组赋给全局变量
currentBlock - 把该数组压入
blockStack栈中,支持嵌套 Block 场景
此时,后续创建的、带 patchFlag 的 VNode,只要处于这个 Block 的作用域内,就会被自动推入 currentBlock 数组——这是由编译后生成的渲染函数隐式完成的,无需手动操作。
createBlock 将 collected 节点固化为 dynamicChildren
当 Block 对应的 VNode 创建完成(例如执行 createBlock('div', ...)),它会调用 setupBlock,做两件关键事:
- 把当前
currentBlock数组(即本次 openBlock 后收集到的所有动态子 VNode)赋值给 Block VNode 的dynamicChildren字段 - 从
blockStack中弹出当前上下文,并恢复currentBlock为上一层的收集数组(或 null)
注意:dynamicChildren 是扁平数组,不仅包含直接子节点中的动态项,也包含子节点内部的动态后代(比如 v-for 内部的 {{ item.name }})。编译器会递归地将整个 Block 范围内的所有动态节点“拉平”填入其中。
为什么能精准跳过静态节点?
因为静态节点根本不会进入 currentBlock 数组:
- 纯文本、无绑定的标签(如
<div>Hello</div>)不带patchFlag,渲染函数不会将其 push 进 currentBlock - 它们在首次挂载后就生成真实 DOM 并固化,后续更新完全绕过
- diff 阶段只遍历
dynamicChildren,自然不碰静态内容
这种“编译期定边界、运行时只管动态区”的设计,让 Vue3 的更新链路更短、更可控。

















