在 Vue2 时代，模板里写一段纯静态 HTML 也会在每次响应式更新时被重新创建、重新 diff。Vue3 把「编译」从简单的语法糖升级为全链路性能优化器：它把静态节点抬出渲染函数、把动态节点打上补丁标记、把事件缓存起来、把整棵树切成可跳过静态的 Block。

一、静态提升：把不变的部分抬出函数

模板

编译结果

效果：静态节点不再参与 diff，创建函数调用从 N 次降为 1 次。

边界：没有绑定任何动态内容的元素节点和属性都会被提升。

二、预字符串化：大量静态内容直接变字符串

当连续静态节点超过内部阈值（≈10 个）时，编译器干脆把它们合并成一个字符串节点：

编译结果

效果：虚拟 DOM 节点数量骤减，diff 时间线性下降。

SSR 场景：字符串可直接输出，无需重复序列化。

三、缓存内联事件：防止渲染时重复创建闭包

模板

Vue2 每次渲染都会生成新的匿名函数：

Vue3 把函数缓存到渲染实例的 _cache 中：

效果：内存占用与 GC 压力显著下降，尤其在高频更新组件。

适用：仅对内联表达式生效；外部函数无需缓存。

四、Block Tree：跳过整棵静态子树

传统 diff 自顶向下逐层比对。Vue3 把任何带 v-if / v-for / 动态绑定的节点标记为 Block，并在其上挂一个 dynamicChildren 数组，后续 diff 只扫这个数组：

渲染结果

效果：静态层级被整层跳过，diff 时间从 O(tree) 降到 O(dynamic)。

边界：根节点、v-if、v-for 自动成为 Block；开发者也可手动标记。

五、PatchFlag：只 diff 真正会变的部分

即使动态节点，也往往只有某几个属性或文本会变。编译器给节点贴上 PatchFlag：

编译结果

TEXT：文本可变

CLASS：class 可变

其余属性标记为静态，diff 时直接跳过。

结语

静态提升、预字符串化、事件缓存、Block Tree、PatchFlag——这五把手术刀把「模板」从运行时负担变成了编译时红利。