Block是Vue 3编译器划分的最小响应式更新单元，按共享依赖聚合节点以实现批量原子更新，避免逐节点diff；其生成经依赖扫描、边界判定、嵌套组装三步，通过Vue Template Explorer可查看并优化。
Vue 3 的编译器在模板编译阶段会构建一种叫 Block Tree（块树） 的中间结构，它不是最终的虚拟 DOM 树，而是为运行时高效更新服务的“可补丁区域”组织形式。理解 Block Tree 的生成逻辑，能帮你精准识别哪些模板片段会被整体重渲染、哪些能局部更新，从而真正从编译层做性能优化。
什么是 Block？为什么需要 Block？
Block 是 Vue 3 编译器划分出的最小响应式更新单元。每个 Block 包含一组具有相同动态属性依赖的节点（比如都依赖同一个 ref），运行时 Patch 过程中，整个 Block 被当作一个原子单位处理——要么全更新，要么跳过。
这样设计是为了避免传统 VDOM Diff 中逐节点比对的开销。Vue 3 把“哪些节点会一起变”提前在编译期分析清楚，运行时直接按 Block 批量更新，大幅减少判断和 DOM 操作。
- 一个静态节点（如纯文本、无绑定的 div）属于它的父 Block，不单独成 Block
- 一个带响应式绑定的节点（如 {{ count }} 或 :id="id"）会触发 Block 提升——它和所有“与它共享响应式依赖”的兄弟/后代节点，共同组成一个新 Block
- 嵌套的 v-if / v-for 会天然创建新的 Block 边界（因为它们引入独立的依赖收集作用域）
Block Tree 是怎么一步步生成的？
编译器从 AST（抽象语法树）出发，通过三步构建 Block Tree：
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 依赖收集扫描：遍历模板，标记每个绑定表达式（如 :class, v-show, 插值）所依赖的响应式变量（如 count, list）
- Block 边界判定：遇到 v-if、v-else-if、v-for、<slot>、或依赖集合发生变化的节点时，结束当前 Block，开启新 Block
- Block 嵌套组装：子 Block 作为 children 挂载到父 Block 下，形成树状结构；最外层是 Root Block（通常对应组件根元素）
例如：
<div>{{ msg }}</div><span>{{ count }}</span>
若 msg 和 count 是不同 ref，则这两个节点会被分到两个相邻的 Block 中；如果它们同属一个 reactive 对象（如 state.msg 和 state.count），且没有其他边界介入，就可能被合并进同一个 Block。
如何查看自己组件的 Block Tree？
Vue 官方提供了编译器可视化工具：Vue Template Explorer。粘贴你的模板，切换到 “Codegen” 或 “AST” 面板，就能看到生成的 createBlock 调用链和嵌套层级——每个 createBlock 就对应一个 Block 节点。
关键观察点：
- 是否出现意料之外的 Block 拆分（比如一个简单列表里，每个 item 都单独 createBlock）→ 可能是 v-for 内部有高频变化的绑定导致 Block 过细
- 是否存在大 Block 包裹了大量静态内容 → 可能因某个深层绑定把整块“拖动”进响应式更新范围，考虑用 v-memo 或提取纯静态子组件隔离
- 根 Block 是否只包含一个元素 → 确保组件模板有明确的单一根节点（否则会自动包裹，增加不必要的 Block 层级）
基于 Block Tree 的实用优化策略
优化本质是让 Block 更“合理”：该合并的合并，该隔离的隔离。
- 收敛响应式依赖：避免在模板中频繁访问深层嵌套属性（如 user.profile.address.city），改用计算属性提前解构，减少 Block 因细粒度依赖而分裂
- 善用 v-memo：对 v-for 列表中相对稳定的子结构，用 v-memo="[item.id]" 显式声明依赖，告诉编译器“只要 id 不变，这个 Block 就不用更新”
- 拆分大型组件：一个包含表单 + 图表 + 列表的大组件，很可能因不同区域依赖不同状态，被迫生成多个跨层级 Block；拆成 <UserForm>、<DataChart> 等子组件后，各 Block 更内聚，更新更精准
- 避免模板中直接调用函数：如 {{ formatName(user) }}，每次 render 都执行且无法静态分析依赖，易导致 Block 被错误扩大或强制重渲染
