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-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章