Block Tree 是 Vue 3.4 引入的编译优化机制，通过将静态或稳定 DOM 片段合并为扁平 block，跳过冗余 VNode 创建与无意义子组件重渲染。它区别于传统 VNode 树——后者为每个元素/指令生成独立节点，导致全树比对和代理层开销；而 Block Tree 仅在动态依赖处插入节点，提升性能。
Block Tree 是 Vue 3.4 引入的编译优化机制，它让编译器在生成渲染函数时，把静态或稳定结构的 DOM 片段“打平”为普通节点，跳过创建不必要的 VNode 和组件代理层，从而天然规避子组件因父组件响应式更新而触发的无意义重渲染。
什么是 Block Tree？和传统 VNode 树有什么区别？
Vue 3 早期默认采用完整的 VNode 树结构：每个元素、指令、插槽、组件都会生成独立 VNode 节点，哪怕内容完全静态。这导致：
- 父组件响应式数据变化时，整个子树 VNode 都需比对（即使子组件 props 没变）
- 子组件被包裹在 Proxy 或 Fragment 节点中，无法被编译器识别为“稳定边界”，容易被动刷新
- 大量冗余 VNode 创建/销毁开销，尤其在列表或嵌套深的模板中明显
Block Tree 改变了这一点：编译器会识别出不依赖响应式状态的模板块（如纯 HTML、静态 class/style、无绑定插槽），将它们合并为一个“block”，只在 block 内部存在响应式依赖的位置才插入动态节点。整个 block 对应一个扁平的 DOM 片段，没有中间 VNode 层 —— 子组件如果不在该 block 内部，就不会被这个 block 的更新波及。
哪些写法能触发 Block Tree 优化？
关键在于“让编译器确信某段模板不会随响应式状态变化”。满足以下任一条件，对应区域就可能成为独立 block：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
-
纯静态标签：比如
<div>Hello</div>、<p class="text-sm">Loading...</p> -
静态属性 + 动态内容分离：如
<span :class="['label', isActive ? 'active' : '']">{{ title }}</span>中 class 是动态的，但标签本身和文本插值可被分别建模，class 变化只影响属性补丁，不触发整节点重造 -
无绑定的插槽调用：使用
<slot name="header"></slot>（不含v-bind或作用域插槽传递响应式值）时，该 slot 占位会被视为静态锚点 -
显式
<template v-memo></template>区域：虽然不是 Block Tree 原生能力，但 v-memo 会强制标记 block 边界，并缓存其子树，与 Block Tree 协同效果更稳
怎么验证 Block Tree 是否生效？
最直接的方式是查看编译后的渲染函数输出：
- 启用
vue/compiler-sfc的generateCodeFrame或使用 Vue Playground 查看 “Compiled Output” 面板 - 搜索
openBlock、createBlock、createElementVNode等调用 —— Block Tree 下，连续静态节点会合并进同一个createBlock，而旧模式下每个标签都调createElementVNode - 在 DevTools 中观察组件 render 触发频率：若父组件更新但子组件的
render函数没执行，说明它已被 Block Tree “隔离”在更新路径之外
避坑提醒：什么情况下 Block Tree 会失效？
Block Tree 是编译期决策，一旦模板含“不确定依赖”，就会降级为传统 VNode 树：
-
在静态标签内混用响应式绑定：比如
<div class="card" :style="{ opacity: loading ? 0.5 : 1 }">...</div>—— 整个 div 无法被静态化 -
插槽带作用域绑定：如
<slot name="item" :item="currentItem"></slot>，会让插槽上下文变成动态，阻断 block 合并 -
使用非编译时可判定的指令：自定义指令若内部读取响应式数据且未声明
getStaticValue，也可能打断 block 划分 -
开启
compilerOptions.isCustomElement但匹配了普通标签：某些自定义元素判定逻辑会干扰 block 分析
不复杂但容易忽略。核心就是：写模板时多一分“静态意识”——能不动的属性就别绑，能拆开的动态逻辑就别塞进静态壳里。Block Tree 不是魔法，而是编译器对你清晰意图的奖励。
