Block Tree是Vue 3中组织可批量更新DOM块的内部结构，v-if通过条件控制对应Block是否参与构建：条件为假时完全跳过，不生成、不挂载、不追踪；条件为真时才创建并加入Block Tree。
v-if 不会创建独立的 Block Tree 节点，而是直接控制其包裹的整个子树是否参与 Block Tree 构建 —— 条件为假时，对应 DOM 片段和对应的 Block Tree 节点均被完全跳过，不生成、不挂载、不追踪。
Block Tree 是什么？和 v-if 有什么关系？
Block Tree 是 Vue 3 响应式系统与编译器协同优化的内部结构，用于组织可批量更新的 DOM 块（Block）。每个 Block 对应一个“响应式作用域”，包含一组具有相同更新时机的节点。v-if 的分支内容会被编译为独立的 Block（如果内部有响应式依赖），但该 Block 是否进入最终的 Block Tree，完全取决于条件求值结果。
例如：
<div v-if="show">
<p>{{ msg }}</p>
<span>{{ count }}</span>
</div>
当 show 为 false 时，整个 <div> 及其子节点不会生成任何 Block Tree 节点；当 show 为 true，才会生成一个包含 p 和 span 的 Block，并加入 Block Tree。
立即学习“前端免费学习笔记（深入）”；
v-if vs v-show：对 Block Tree 的影响差异
- v-if：条件为假 → 对应 Block Tree 分支彻底不存在 → 零内存占用、零副作用、零响应式依赖收集
-
v-show：始终生成 Block Tree 节点 → 仅通过
display: none切换可见性 → 响应式依赖照常收集、计算属性照常执行、组件照常挂载
所以，频繁切换且结构复杂的内容，用 v-show 更适合保持 Block Tree 稳定；首次渲染成本高或条件极少为真（如错误提示、管理后台权限模块），用 v-if 更利于减少初始 Block Tree 规模。
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
嵌套 v-if 与 Block Tree 的层级关系
每层 v-if 都可能引入新的 Block 边界，尤其当内部有响应式插值或组件时。Vue 编译器会尽可能合并相邻静态节点，但动态分支会强制切分 Block。
注意以下写法会生成多个 Block：
<div v-if="a">
<p>{{ x }}</p>
<div v-if="b">
<span>{{ y }}</span>
</div>
</div>
这里至少产生两个 Block：外层 v-if="a" 对应一个 Block，内层 v-if="b" 在 a 为真时再创建一个子 Block。若想减少 Block 数量，可考虑用计算属性提前合并逻辑：
<div v-if="shouldShowDetail">
<p>{{ x }}</p>
<span>{{ y }}</span>
</div>
这样整个区域可被编译进同一个 Block（前提是无其他强制分割因素）。
动态组件与 v-if 共用时的 Block Tree 行为
<component :is="comp"> 本身不构成 Block 边界，但配合 v-if 使用时，组件实例的创建/销毁会触发对应 Block Tree 子树的整块卸载与重建。
- 组件内部模板仍按自身逻辑生成 Block Tree
- v-if 控制的是该组件 VNode 的存在性 → 直接决定其整个 Block Tree 子树是否接入主 Block Tree
- 切换组件类型时，旧组件 Block Tree 被移除，新组件从头构建 Block Tree
因此，避免在高频交互区域用 v-if 切换重型组件；可改用 v-show + keep-alive 组合，让 Block Tree 结构稳定，仅控制显隐与缓存状态。
