Block Tree 是 Vue 3 编译器在模板编译阶段按动态性边界自动划分的最小响应式更新单元，内含共享依赖的动态节点，静态子树被提升复用，运行时仅对 Block 内需更新部分执行精准 diff。
Vue 编译阶段识别动态节点，靠的是对模板 AST 的静态扫描，不是运行时判断。它在生成渲染函数前，就明确知道哪些地方会变、为什么变，并直接打上可执行的标记。
哪些情况会被判定为动态节点
编译器遇到以下任一情形，就会将对应节点（及其最近的合法容器）标记为动态：
- v-if / v-else-if / v-else 指令 —— 控制节点存在性
- v-for 指令 —— 生成可变数量的子节点
- {{ }} 插值表达式 —— 文本内容响应式变化
- :class、:style、:id、:name 等绑定属性 —— 属性值依赖响应式状态
- v-show、v-bind="obj"、v-model 等指令 —— 触发 DOM 行为或属性更新
标记的具体形式：PatchFlags 位掩码
每个被识别出的动态节点，都会在 createVNode 调用中附带一个整数型 PatchFlag。它不是字符串描述，而是二进制位组合，比如：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- TEXT = 1（二进制 0001）→ 节点文本内容会变
- CLASS = 2（二进制 0010）→ class 属性会变
- STYLE = 4（二进制 0100）→ style 属性会变
- PROPS = 8（二进制 1000）→ 其他属性（如 id、data-id）会变
- 多个同时发生 → 比如文本+class 变化，flag 就是 1 | 2 = 3
动态节点如何影响块结构（Block）
仅标记还不够，Vue 还要组织更新粒度。编译器会在动态节点“上游”插入 openBlock()，并用 createBlock() 把它和所有后代动态节点包裹起来。这个 Block 容器会自带 dynamicChildren 数组，在首次渲染时就把所有子孙动态节点扁平化收集进去。后续更新只遍历这个数组，完全跳过静态子树。
立即学习“前端免费学习笔记（深入）”；
静态提升（hoist）与动态标记协同工作
静态节点不会被打上 PatchFlag，也不会进入 dynamicChildren。它们在编译期就被提取成常量（如 hoisted_1），渲染时直接复用，不参与任何 diff。动态标记和静态提升是一体两面：一个告诉运行时“哪里要更新”，另一个告诉“哪里完全不用管”。
