Block 如何收集动态子代？currentBlock 流程深度解析

Vue 3 的 Block 机制通过编译期静态分析精准识别动态节点（如 v-if、v-for、插值、动态绑定等），并打上 patchFlag；运行时则依靠 openBlock 和 createBlock 协同构建动态追踪栈，将当前 Block 范围内所有动态子代（含深层后代）扁平化收集至 dynamicChildren 数组，从而在更新时跳过全部静态节点、仅遍历该数组进行高效 patch——这种“编译定性、运行聚焦”的设计大幅压缩了 diff 范围，让响应式更新更轻量、更可控。

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 数组：

• 纯文本、无绑定的标签（如
  Hello
  ）不带 patchFlag，渲染函数不会将其 push 进 currentBlock
• 它们在首次挂载后就生成真实 DOM 并固化，后续更新完全绕过
• diff 阶段只遍历 dynamicChildren，自然不碰静态内容

这种“编译期定边界、运行时只管动态区”的设计，让 Vue3 的更新链路更短、更可控。

今天关于《Block 如何收集动态子代？currentBlock 流程深度解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！