block tree 是 vue 3.4+ 编译器构建阶段自动启用的默认优化机制，不可运行时禁用；其核心是通过静态提升、避免冗余响应式绑定、合理使用 v-memo 等手段减少 block 数量与嵌套深度，降低依赖追踪粒度和子组件被动刷新。
Block Tree 不是运行时可“禁用”的功能，它是 Vue 3.4+ 编译器在构建阶段自动启用的默认优化机制，无法在生产环境运行时关闭或手动“收集控制”。所谓“禁用不必要的收集”，实际是指**避免触发编译器将本可静态提升的节点误判为动态块**，从而减少 block 边界、降低依赖追踪粒度、规避子组件被动刷新。
识别哪些内容会被错误纳入 Block
Block 的划分依据是模板中是否存在响应式依赖。以下情况容易导致编译器创建冗余 block：
- 在纯静态结构中混用响应式表达式，例如：
<div class="card">{{ title }}</div>（整个 div 因插值被划入一个 block） - v-if/v-for 包裹了大量静态子内容，但条件变量本身频繁变化，使整个块反复重渲染
- 使用非响应式 props 传递给子组件，但父组件的响应式状态更新仍会触发热路径下的 block 更新（即使子组件未订阅该状态）
用静态提升（Static Hoisting）减少 block 数量
Vue 编译器会自动将完全静态的节点（无任何绑定、插值、指令）提升到渲染函数外层，跳过 runtime 创建。你可以主动配合这一机制：
- 把不随状态变化的 HTML 片段抽离为独立组件或使用 + v-pre（仅用于调试，不推荐生产）
- 避免在静态标签上写空绑定，如
<span :class="''">Text</span>，这会让编译器认为存在动态 class - 对稳定文本使用 computed 属性封装，而非直接插值，便于编译器识别其稳定性（如
{{ staticLabel }}而非{{ 'Label' + '' }}）
用 v-memo 控制局部更新边界
当某段模板逻辑复杂、但更新频率低，又不想被卷入更大 block 时，可用 v-memo 显式声明更新条件：
<div v-memo="[list.length, filter]"><!-- 列表渲染 --></div>- v-memo 的依赖数组决定该片段是否跳过 diff，它不改变 block 结构，但能阻止子树无意义比对
- 注意：v-memo 不能替代响应式设计，滥用会导致状态不同步
检查编译输出确认优化效果
启用 Vue CLI 或 Vite 的 --debug 模式，查看生成的渲染函数代码：
- 查找
openBlock/createBlock调用频次，高频出现说明 block 过细 - 对比有无 v-if/v-for 时的 block 嵌套深度，深嵌套常意味着控制流指令使用不当
- 使用 Vue Devtools 的 Performance 面板 观察组件更新路径，确认子组件是否因父级 block 变更而刷新
