Vue编译优化由结构、依赖与语义驱动，分静态节点识别、Block边界划分、PatchFlag注入和提升策略四步：静态节点需全字面量且子树静态；Block按依赖一致性切分；PatchFlag按绑定类型二进制编码；提升依粒度分级复用。
Vue 编译阶段的优化不是靠经验猜测，而是由一套明确、可推导的决策逻辑驱动。它从模板结构出发，结合响应式依赖关系和指令语义，在 parse 之后、codegen 之前，系统性地判断“哪里该提升”“哪里该分块”“哪里该打标记”。理解这个决策链条，比背诵优化规则更关键。
静态节点识别：从标签到子树的逐层判定
编译器遍历 AST 时，对每个节点执行静态性检查，满足全部条件才标记为静态：
- 标签名是合法 HTML 标签名（如 div、span），非动态组件或 :is 表达式
- 无任何响应式绑定：不含 {{ }}、v-bind、v-on、v-if、v-for、v-slot 等指令或插值
- 所有属性值均为字面量（如 class="btn"、id="header"），不含表达式或变量引用
- 所有子节点也必须满足上述条件——只要一个子节点动态，整棵子树就失去静态资格
一旦确认为静态节点，它会被提升（hoist）为渲染函数外的常量 VNode；若整棵子树静态，则整体提升，后续 re-render 完全跳过创建与 diff。
Block 边界划分：动态依赖变化即触发新块
Block 不是按 DOM 层级机械切分，而是围绕“响应式依赖一致性”组织。编译器在扫描过程中，一旦发现依赖集合变更，就结束当前 Block 并开启新 Block：
立即学习“前端免费学习笔记（深入）”；
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- v-if / v-else-if / v-else 的每个分支各自形成独立 Block，因它们依赖不同条件变量
- v-for 内部自动成块，循环项（item）、索引（index）构成新的依赖上下文
- 同一作用域下，{{ count }} 和 :class="cls" 若都依赖同一个 ref 或 reactive 对象属性，倾向合并进同一 Block
- 嵌套组件中，
是天然边界——父组件无法预知插槽内容的依赖，因此 slot 外围总启新 Block
Root Block 通常对应组件模板根元素；若根元素本身静态（如仅含纯文本），则整个组件可能被压缩为单个静态块，甚至被进一步内联。
PatchFlag 注入：基于节点类型与绑定目标的二进制编码
PatchFlag 不是随机分配，而是由节点类型 + 绑定属性组合决定。编译器分析每个动态节点后，按需设置标志位：
- <p>{{ msg }}</p> → 仅文本变化 → PatchFlags.TEXT（值为 1）
- <div :class="cls" :style="sty"></div> → class 和 style 变 → PatchFlags.CLASS | PatchFlags.STYLE（2 | 4 = 6）
- <input :value="val" @input="onInput"></input> → 属性与事件共存 → PatchFlags.PROPS | PatchFlags.HYDRATE_EVENTS（8 | 32 = 40）
- 带 key 的 <template v-for> → PatchFlags.KEYED_FRAGMENT（128）
运行时 diff 函数读取 flag 后，只执行对应位所代表的比对逻辑，其余字段（如 props 中未声明的属性、子节点结构）直接跳过。
提升策略选择：按粒度分级复用静态内容
静态提升不是“全有或全无”，Vue 3 支持多级复用策略，取决于静态内容规模与复用频率：
- 小片段（如单个 <h2>标题</h2>）→ 提升为 const 常量，直接复用引用
- 中等子树（如含 3–5 个节点的导航栏）→ 提升为函数调用 hoist1()，避免重复对象字面量创建
- 大型静态结构（如文档页侧边栏）→ 使用 WeakMap 缓存，防止内存泄漏，同时支持跨组件共享同一 VNode 实例
这些策略在 optimize 阶段由编译器自动选择，开发者无需干预，但可通过 Vue Template Explorer 查看实际生成的 hoistX() 调用层级与数量。
