Vue3 模板编译优化

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

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

模板

xml 复制代码

<template>
  <div>
    <p>永远不变的文案</p>
    <p>{{ msg }}</p>
  </div>
</template>

编译结果

javascript 复制代码

// 只提升一次，渲染函数里只剩引用
const _hoisted_1 = /*#__PURE__*/createStaticVNode("<p>永远不变的文案</p>",1)

export function render(_ctx) {
  return openBlock(), createElementBlock("div", null, [
    _hoisted_1,
    createElementVNode("p", null, toDisplayString(_ctx.msg), 1 /* TEXT */)
  ])
}

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

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

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

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

xml 复制代码

<ul>
  <li v-for="i in 100">{{ i }}</li>
  <li>大量静态尾巴</li>
  <!-- 这里连续 15 个静态节点 -->
</ul>

编译结果

arduino 复制代码

const _hoisted_1 = _createStaticVNode(
  "<li>大量静态尾巴</li>...",
  15
)

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

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

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

模板

ini 复制代码

<button @click="count++">+</button>

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

php 复制代码

onClick: function ($event) { ctx.count++ }

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

ini 复制代码

onClick: _cache[0] || (_cache[0] = ($event) => ctx.count++)

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

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

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

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

xml 复制代码

<form>
  <div>静态账号提示</div>
  <input v-model="user.id" />
  <div>静态密码提示</div>
  <input v-model="user.pw" />
</form>

渲染结果

scss 复制代码

Block(form)
  ├─ dynamicChildren[ input#1, input#2 ]

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

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

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

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

css 复制代码

<div :class="cls" data-id="1" title="title">{{ name }}</div>

编译结果

php 复制代码

createElementVNode("div", {
  class: cls,
  "data-id": "1",
  title: "title"
}, toDisplayString(name), 3 /* TEXT | CLASS */)

TEXT：文本可变

CLASS：class 可变

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

结语

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