vue 3 编译器优化流水线包含静态提升、patchflag标记和block tree三层协同机制：静态节点被提升复用并标记-1；动态节点携带text（1）、class（2）等patchflag精准标识变更类型；block tree将动态节点组织为扁平块数组，使diff仅靶向遍历，大幅提升更新效率。
Vue 3 编译器的优化流水线不是线性执行的简单步骤，而是一套协同工作的三层机制：静态识别 → 动态标记 → 结构扁平化。它最终目标是让运行时 diff 只处理真正变化的部分。
静态提升（Hoist Static）
编译器扫描模板，把完全不依赖响应式数据的节点提前“拎出来”，在 render 函数外层一次性创建并缓存。这些节点打上 -1 /* HOISTED */ 标记，渲染时直接复用，不参与每次更新。
例如：<h1>欢迎页</h1>
<p>{{ msg }}</p> 中的 <h1></h1> 会被提升为常量 VNode，render 内只保留对 msg 的动态处理。
PatchFlag 动态标记系统
每个动态节点在 transform 阶段被打上精准类型标记，告诉 runtime “这里什么变了”。常见标记包括：
- 1 /* TEXT */：仅文本内容变化，跳过 class/style/props 检查
- 2 /* CLASS */：只比对 class 绑定，忽略子节点
- 8 /* PROPS */：仅检查非 class/style 的属性，且跳过 children 对比
- 32 /* STABLE_FRAGMENT */：子元素顺序稳定，避免重排计算
标记直接嵌入生成的 _createVNode 调用中，如：_createVNode("p", null, _ctx.msg, 1)。
Block Tree（块树）结构优化
编译器将所有带 PatchFlag 的动态节点，连同其父 Block 节点一起组织成一个扁平数组（Block），由 _openBlock() 和 _createBlock() 管理。
运行时 diff 不再遍历整棵 VNode 树，而是只遍历这个 Block 数组，配合 PatchFlag 做靶向比对——相当于把“全城搜人”变成“只查三栋楼的四户人家”。
配套优化机制
这些机制不是孤立存在，而是相互支撑：
- 静态提升减少 Block 内节点数量
- PatchFlag 让每个 Block 节点的 diff 更轻量
- Block Tree 让 runtime 知道“该从哪开始比、比哪些”
- cacheHandler 自动缓存内联事件函数，避免重复创建
整个流水线在构建时完成，不增加运行时开销，却让更新逻辑从“盲目对比”走向“精确制导”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
