Vue.js 3 的 Block Tree 机制通过扁平化数据、封装组件、静态提升和合理 key 等方式优化 diff 性能，避免深层嵌套 v-for/v-if 导致的 Block 层级过深与动态节点过多问题。
Vue.js 3 的 Block Tree（块树）机制本身不直接暴露给开发者，它是编译器在模板编译阶段生成的内部结构，用于优化 diff 和更新性能。所谓“规避多层嵌套循环”，实际是指：**减少因模板中深层嵌套的 v-for、v-if 组合导致的 Block 层级过深、动态节点过多，从而影响 patch 性能和内存开销。**
用 v-for 提前解构扁平化数据结构
深层嵌套循环往往源于原始数据是多维数组或嵌套对象（如 list → items → children → nodes）。与其在模板里写三层 v-for，不如在逻辑层预先 flatten 或 map 成一维可索引结构。
- 在 setup 或 computed 中处理数据，例如：
const flatItems = computed(() => data.flatMap(d => d.items.flatMap(i => i.children.map(c => ({...c, parentId: i.id, rootId: d.id}))))) - 模板中只用单层
v-for="item in flatItems"，配合 class 或 data-attribute 区分层级语义 - 避免在 v-for 内部再调用方法或计算属性做嵌套映射（会触发重复执行）
用 作用域插槽 + render 函数 替代深层条件嵌套
当 v-if/v-for 交织（如 v-for 内有 v-if、又有 v-for）时，编译器可能为每个分支生成独立 Block，增加树深度。可用插槽把条件逻辑下沉到子组件，由子组件自行控制 Block 划分。
- 将“列表项+其子列表”封装为自定义组件（如
<TreeNode>），接收 item 和 depth prop - 在子组件内部用
render()或h()手动控制是否创建 block（例如对叶子节点跳过 v-for） - 父组件只保留一层 v-for，Block Tree 深度被限制在组件边界内
启用 compilerOptions.hoistStatic 与 cacheHandlers
虽然不直接减少嵌套层数，但能显著降低 Block 内动态节点比例，让 diff 更轻量：
立即学习“前端免费学习笔记（深入）”；
- 构建时配置
hoistStatic: true（Vite 默认开启），将静态 vnode 提升到 setup() 外部，不参与 Block 更新 - 对频繁触发的事件处理器使用
cacheHandlers: true（Vue 3.4+），避免每次渲染都新建函数，减少 block 内部动态引用 - 模板中避免
@click="handle(item, $event)"这类闭包绑定；改用@click="() => handle(item)"并配合 cacheHandlers
用 key 强制复用策略 控制 Block 分治粒度
Block 的划分受 key 影响。合理设置 key 能让编译器合并相邻静态块、拆分高动态区域：
- 为每一层 v-for 显式提供稳定、唯一、层级相关的 key，例如：
v-for="child in node.children" :key="`${node.id}-child-${child.id}`" - 避免用 index 作 key，否则移动元素会打乱 Block 对应关系，导致无效更新
- 若某层内容极少变化（如仅文字），可统一用静态 key（如 "title-block"），促使编译器将其提升为 static block
