block tree 是 vue 3 编译器在模板编译阶段按动态性边界自动划分的块状结构，每个 block 为最小响应式更新单元，内含共享依赖的动态节点，静态子树被提升复用，运行时仅对 block 内需更新部分执行精准 diff。
Block Tree 是 Vue 3 编译器在模板编译阶段生成的一种结构化组织方式，它把整个模板按“动态性边界”自动切分成多个独立的响应式更新单元——也就是 Block（块）。每个 Block 只包含可能变化的节点，而其内部的静态子树会被标记为 hoisted（提升），运行时直接跳过比对和遍历。
Block 是什么？为什么需要划分 Block？
Block 是 Vue 3 中最小的、可单独追踪依赖与触发更新的渲染单元。它不是手动写的代码结构，而是编译器根据模板内容自动识别并划分出来的逻辑区块。
- 一个 Block 通常以带有响应式绑定（如 {{ }}、v-if、v-for、:class）的元素为起点，向下包含所有受同一组响应式状态影响的子节点
- 相邻但响应式依赖不同的区域会被划入不同 Block，比如两个 v-if 分支各自形成独立 Block
- 这样做的核心目标是：让 diff 算法不用遍历整棵树，只聚焦于真正可能变化的部分，大幅减少运行时开销
Block Tree 如何配合 PatchFlag 实现精准更新？
PatchFlag 是编译器加在动态节点上的数字标记，用于说明该节点哪类属性会变（如文本、class、style 等）。Block Tree 与 PatchFlag 协同工作：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- Block 确定“更新范围”——告诉 Vue：“这一小片 DOM 需要重新比对”
- PatchFlag 明确“更新类型”——告诉 diff：“这个节点只需检查文本内容，那个只需比对 class”
- 比如
{{ msg }}
会被打上 PatchFlags.CLASS | PatchFlags.TEXT（即 2 | 1 = 3），运行时只做这两项比对，不查 props、style 或子节点结构
静态提升（Static Hoisting）如何与 Block Tree 协同？
静态提升是 Block Tree 能高效工作的前提之一。编译器会把纯静态节点（无任何响应式绑定、指令或插槽）从 Block 内提取出来，在渲染函数外创建一次，后续复用。
- 例如 整个结构若完全静态，就会被提升为常量 VNode，不在 Block 内参与 diff
标题
说明文字
- 只有包裹它的父容器含动态内容（如 ...）时，才让它成为某个 Block 的根，但其子树仍保持提升状态
- 这减少了内存分配、GC 压力，也缩短了每次 render 函数执行时间
写模板时怎么利于 Block Tree 发挥作用？
你不需要手写 Block，但可以通过编写习惯帮编译器更好划分：
- 避免在静态内容中混入无意义的绑定，比如 {{ '提示文字' }} 应写成 提示文字
- 用 替代多余 wrapper 元素，减少无效层级干扰 Block 边界识别
- 把强耦合的动态逻辑尽量收敛到局部，比如把分散的 :class 和 {{ text }} 放在同一元素上，比拆到父子元素中更易形成紧凑 Block
- 慎用 v-html 或内联函数调用，它们会让编译器难以静态分析，可能退化为 FULL_PROPS 类型 Block，削弱优化效果
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
