第 32 题：Vue3 Template 编译原理（Template → AST → Transform → Codegen → Render 函数）

第 31 题：Vue3 Template 编译原理（Template → AST → Transform → Codegen → Render 函数）

结构依旧为：
核心回答 → 编译流程 → AST 与指令解析 → 转换 transform → 生成代码 → 面试追问 → 高分总结

---

🎯 一、核心回答（面试官最关注）

Vue3 的模板编译器（compiler-core）主要完成三件事：

1. 将 template 转成 AST（抽象语法树）
2. 对 AST 进行 transform（指令、插值、组件等）
3. 根据 AST 生成可执行的 render 函数

最终输出：

function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("div", null, [
    _toDisplayString(_ctx.msg),
  ]))
}

Vue3 的编译特点：

• 完全模块化（parser / transform / codegen 分离）
• 支持插件式 transform
• 静态提升（Hoist）
• PatchFlag（极大提升 diff 性能）
• Block Tree（控制 VNode 更新范围）

---

🎯 二、完整编译流程图（必须掌握）

Template
  ↓  parse
AST（有类型、节点、指令）
  ↓  transform
优化：静态提升、指令处理、v-if/v-for 转换
  ↓  codegen
生成渲染函数代码
  ↓
Render Function（执行时变成 vdom）

Vue3 编译器 =
parse → transform → codegen 三步走。

---

🎯 三、第一步：Parse（将 template 变成 AST）

例如模板：

<div class="box">{{ msg }}</div>

AST 会变成：

{
  type: ELEMENT,
  tag: "div",
  props: [
    { type: ATTRIBUTE, name: "class", value: "box" }
  ],
  children: [
    {
      type: INTERPOLATION,
      content: { type: SIMPLE_EXPRESSION, content: "msg" }
    }
  ]
}

AST 中包含：

• Element 节点
• Text 文本节点
• Interpolation 插值节点
• Directive 指令节点（v-if / v-for / v-bind）
• 属性节点

解析器使用有限状态机 + 正则完成。

---

🎯 四、第二步：Transform（最关键）

Transform 负责：

• 把 v-if 转成三元表达式
• 把 v-for 转成循环结构
• 把插值变成 _toDisplayString()
• 静态提升（静态节点提升到外层）
• PatchFlag 生成优化标记
• 创建 Block 树（Vue3 性能关键）

你可以理解为：

transform = 把模板语法糖，全部转换成可执行的生产级代码结构

示例：
<div>{{ msg }}</div> 在 transform 后会变成：

createVNode("div", null, [
  toDisplayString(msg)
], PatchFlag.TEXT)

PatchFlag 是 Vue3 的性能根基。

---

🎯 五、第三步：Codegen（生成最终 render 函数）

从 AST 生成 JavaScript 代码字符串。

生成如下代码：

function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("div", null, [
    _createTextVNode(_toDisplayString(_ctx.msg), 1 /* TEXT */)
  ]))
}

解释：

• _createElementBlock → 经过 Block 优化的 VNode
• _openBlock() → 创建 block（patch 更快）
• PatchFlag = 1 → 表示更新点只有文本

这是 Vue3 性能巨大的提升来源。

---

🎯 六、Vue3 编译的重要优化点（面试官非常爱问）

---

⭐1. 静态提升（Hoist）

模板：

<div><span>static text</span></div>

Vue3 会把静态节点提升：

const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", "static text")

function render() {
  return _createElementBlock("div", null, [_hoisted_1])
}

好处：

• 静态节点不会重复创建
• diff 时完全跳过静态部分

---

⭐2. PatchFlags（性能核心）

根据模板特点打上更新标记：

TEXT
PROPS
CLASS
STYLE
FULL_PROPS
KEYED_FRAGMENT
UNKEYED_FRAGMENT

这样 diff 时：

有 PatchFlag 的节点才进入 diff
没有 PatchFlag → 静态 → 完全跳过

这是 Vue3 比 Vue2 快 2--3 倍的根本原因。

---

⭐3. Block Tree

Vue3 会找出动态节点的"最小更新区域"：

block = 动态节点的集合

每个 block 只 diff 自己内部的动态子节点，不遍历整个树。

---

🎯 七、面试官常问追问（附高分回答）

---

❓1：Vue3 为什么要从 VNode Tree 转成 Block Tree？

高分回答：

因为整棵树 diff 成本太高，将动态节点划成 block，只 diff 有 PatchFlag 的节点，提升性能。

---

❓2：模板中一个静态大列表，Vue3 会做什么优化？

答：

• 静态提升
• Hoist 到外层作用域
• 永不 diff

---

❓3：为什么 Vue3 编译后会出现 _ctx、_cache、_openBlock 等变量？

答：

这些都是模板编译生成的运行时 helper，用来：

• 帮助执行 render 函数
• 提供创建 vnode 的工具
• 维护 block 栈
• 进行 caching 和优化

---

❓4：Vue3 template 是否可以编译为 SSR 代码？

是的，Vue3 提供两种编译模式：

• compile() → 客户端渲染
• compileSSR() → 服务端渲染

同样经历 AST → transform → codegen

只是生成不同的代码结构。

---

🎯 八、金牌总结（可以背诵）

Vue3 模板编译器将 template 转成 AST，通过 transform 执行指令处理、静态提升、PatchFlag 标记，最终通过 codegen 输出高性能的 render 函数。

编译时优化（Hoist、PatchFlag、Block Tree）极大提升了运行时性能，是 Vue3 较 Vue2 最大的架构升级。