Vue.js编译器通过静态提升、补丁标记、块级树扁平化、缓存与预字符串化四大机制在编译期优化性能：静态内容被提取复用，动态节点按类型打补丁标记以减少diff开销，模板结构稳定时启用块级扁平化降低递归深度，特定模式下激活事件缓存和静态节点字符串化。
Vue.js 编译器不是“一键优化”的黑盒，而是一套在编译阶段主动做取舍的机制——它必须在模板可读性、开发灵活性和运行时性能之间持续权衡。参数本身不直接暴露给开发者，但模板写法会实质性影响编译器能否启用关键优化，进而决定最终渲染效率。
静态提升：依赖模板结构的“可预测性”
编译器只对明确静态的内容做提升（如纯文本、无绑定属性的标签），一旦模板中混入动态表达式，整个节点就会降级为动态节点。
- ✅ 推荐写法：
<footer>Copyright 2026</footer>→ 被提取为_hoisted_1 = createStaticVNode(...)，只创建一次 - ❌ 破坏行为：
<footer>Copyright {{ year }}</footer>→ 整个 footer 失去静态标记，每次 render 都重新创建 VNode - ⚠️ 注意：v-pre 可强制跳过编译，但仅适用于完全无响应式需求的区块；v-once 适合单次渲染内容，两者不可替代静态提升
补丁标记：靠“类型收敛”减少 diff 开销
编译器为动态节点打 patch flag（如 class、style、text 等），运行时 diff 只比对对应类型，跳过无关字段。但复杂表达式会让标记失效。
- ✅ 推荐写法：
:class="computedClass"+computed返回字符串或对象 → 编译器识别为 class 类型，打 flag=2 - ❌ 破坏行为：
:class="isActive ? 'active' : 'inactive'"或{{ items.map(...).join(...) }}→ 编译器无法推断类型，降级为全量 diff（flag=1） - ? 关键点：不是“不能写三元”，而是避免在模板里做数据转换；计算逻辑移到
computed或methods中更可控
块级树扁平化：靠“结构稳定”降低递归深度
Vue3 将模板切分为 block（块），每个 block 内部节点扁平排列，diff 不再深度递归子树。但 v-if/v-for 混用或动态组件会打断块结构。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐写法：
v-for单独包裹列表，v-if放在父容器上 → 编译器生成独立 block，更新仅限局部 - ❌ 破坏行为：
<div v-for="item in list" v-if="item.visible">...</div>→ 编译器无法确定循环体是否恒定，放弃块优化，退化为 Vue2 式递归 diff - ? 替代方案：用
computed过滤数据，保持v-for内容纯净；或改用v-show保留 DOM 结构稳定性
缓存与预字符串化：编译期决定运行时开销
部分优化需显式配置或符合特定模式才能激活，比如事件处理器缓存、静态 vnode 字符串化。
- ✅ 启用缓存：在 vue.config.js 中开启
cacheHandlers: true→ 相同事件函数被复用，避免闭包重复创建 - ✅ 预字符串化：连续多个静态兄弟节点（如多段
<p>...</p>）自动合并为一个createStaticVNode字符串，节省 AST 节点数 - ⚠️ 限制：预字符串化仅适用于纯 HTML，含指令或插值即失效；缓存对箭头函数无效，需用命名方法或
computed
