Vue 3 的 Block Tree 优化机制通过“动静分离”的编译策略，将模板智能切分为细粒度的更新块（Block），结合静态提升（复用完全不变的 vnode）和动态节点标记（Patch Flag 精准限定 diff 范围），三者协同大幅削减运行时虚拟 DOM 对比与重渲染开销——这意味着哪怕组件中仅有一个响应式字段变化，Vue 也能跳过成百上千个静态节点的创建与比对，实现毫秒级、高可预测的更新性能，是写出真正高性能 Vue 应用不可忽视的核心底层逻辑。

Vue 3 的编译优化中，Block Tree（块树） 是核心机制之一，它和 静态提升（Static Hoisting）、动态节点标记（Patch Flagging） 共同作用，大幅减少运行时 diff 开销。理解这三者的协作逻辑，是写出高性能 Vue 模板的关键。

Block Tree：按“动静分离”划分更新边界

Block 不是 DOM 块，而是编译器生成的、具有独立更新能力的虚拟节点子树。每个 Block 对应一个“最小响应式作用域”——只包含可能因响应式状态变化而需要重新 patch 的节点。

编译器会自动将模板切分成多个嵌套 Block，顶层是 Root Block，内部根据条件、列表、插槽等产生子 Block。关键规则：

• 静态节点（无响应式绑定、无指令、无插值）不进入任何 Block，直接提升到渲染函数外缓存
• 动态节点（含 {{ }}、v-if、v-for、v-bind 等）必须归属某个 Block
• 一个 Block 内部只追踪自己范围内的响应式依赖，不跨 Block 收集依赖

静态提升：把确定不变的内容提前固化

静态提升不是“提升到 setup”，而是提升到组件渲染函数作用域顶层，作为常量创建一次，后续复用。

例如：

会被编译为类似：

const hoisted_1 = createElementVNode('div', { class: 'header' }, [
  createElementVNode('h1', null, 'Title')
])
// 渲染函数中直接 return hoisted_1，不重复创建

注意：只要节点不含任何响应式内容（包括 class/style 中的绑定），就会被提升。哪怕父节点是动态的，子节点静态仍可单独提升。

动态节点标记：精准告知 runtime “哪里要更新”

每个动态 vnode 在创建时会被打上 Patch Flag（如 PATCHED、TEXT、CLASS、STYLE、PROPS 等），标识其需比对的具体属性类型。

比如：

会被标记为 CLASS | STYLE | TEXT，diff 时 runtime 只比对 class、style 和文本子节点，跳过 props（无动态 prop）、children（除文本外无其他子节点）等无关字段。

这些 flag 在编译期确定，运行时无需推断，显著降低 patch 复杂度。

三者协同：编译期切分 + 提升 + 标记 → 运行时极简 diff

Block Tree 定义更新粒度，静态提升消除冗余 vnode 创建，动态标记缩小比对范围——三者缺一不可：

• 没有 Block，所有动态节点都在同一作用域，响应式依赖混乱，更新粒度粗
• 没有静态提升，每次 render 都新建相同 vnode，浪费内存与 GC 压力
• 没有 Patch Flag，runtime 只能全量 deep diff，无法跳过确定未变的字段

实际效果：一个含 10 个静态 div 和 1 个动态 v-if 的列表项，更新时仅重 render 该 if 分支所在的 Block，其余静态结构完全复用，不进 diff 流程。

以上就是《Vue.jsBlockTree优化原理详解》的详细内容，更多关于的资料请关注golang学习网公众号！