Vue3底层架构——编译器

编译器是什么意思呢？和我们之前讲过的响应式系统有什么关联呢？

编译器只会生成“访问响应式数据的代码”，执行收集依赖在运行时。

编译 .vue 文件 -> render -> 访问 _ctx.count -> proxy.set -> track

而本文我们着重讲讲编译这个过程。

一、Vue 编译器整体架构

Vue3 把编译器拆分为三个部分：

@vue/compiler-sfc   → 处理 .vue 文件
@vue/compiler-dom   → DOM 平台相关编译
@vue/compiler-core  → 核心编译逻辑（平台无关）

90% 的“原理”，都在 compiler-core

核心目标是把 template 转成“尽量少 diff 的 render 函数”

最终产物不是字符串，而是：

二、编译流水线

Vue 编译是一个​标准三段式编译器​：

学过 babel 的同学可以发现，这个过程非常像 babel 。

Template
  ↓ parse
Template AST
  ↓ transform
JavaScript AST（增强）
  ↓ generate
render function

源码入口（compiler-core）：

baseCompile(template, options)

三、第一阶段：parse（模板 → AST）

3.1 AST 节点结构

interface Node {
  type: NodeTypes
  loc
}

常见节点类型：

enum NodeTypes {
  ROOT,
  ELEMENT,
  TEXT,
  INTERPOLATION,
  SIMPLE_EXPRESSION,
  ATTRIBUTE,
  DIRECTIVE
}

3.2 parse 的本质

依次遍历解析每一个节点，把 template 字符串解析成一棵 AST

示例：

<div>{{ count }}</div>

生成 AST（简化）：

ROOT
 └─ ELEMENT(div)
     └─ INTERPOLATION
         └─ SIMPLE_EXPRESSION(count)

四、第二阶段：transform（AST → 优化 AST）

transform 阶段做的不是“改结构”，而是：给 AST 打“运行时优化标记”

4.1 transform 的执行模型

function transform(root, options) {
  traverseNode(root, context)
}

遍历 AST，对每个节点：

• 执行 nodeTransforms
• 收集依赖
• 标记 PatchFlag
• 构建 BlockTree

4.2 transformContext

interface TransformContext {
  helpers
  components
  directives
  currentNode
  parent
}

transform 不是“纯函数”，而是有上下文的编译过程

4.3 表达式分析

{{ count }}

会被转成：

toDisplayString(_ctx.count)

并且：

• 标记该节点 依赖响应式数据
• 未来会生成 PatchFlag

4.4 PatchFlag 的来源

PatchFlag 是在 transform 阶段生成的：

PatchFlags.TEXT
PatchFlags.CLASS
PatchFlags.PROPS
PatchFlags.STYLE

例如：

<div>{{ count }}</div>

最终标记：

1 /* TEXT */

该魔法注释表示：这个节点只需要 diff 文本

4.5 Block Tree

openBlock()
createElementBlock(...)

Block 的作用：收集所有“动态子节点”

transform 阶段会判断：

• 哪些节点是静态的
• 哪些是动态的

动态的才进入 block：

block.children.push(node)

diff 时只遍历 block，不全树 diff

五、第三阶段：generate（AST → render 函数）

5.1 generate 的目标

输出一个 JS 函数 AST，最后 stringify：

function render(_ctx, _cache) {
  return ...
}

5.2 helper 的注入机制

transform 阶段收集：

context.helpers.add(CREATE_ELEMENT_VNODE)

generate 时生成：

import { createElementVNode } from "vue"

5.3 生成代码示例

<div class="a">{{ count }}</div>

生成 render：

function render(_ctx, _cache) {
  return openBlock(), createElementBlock(
    "div",
    { class: "a" },
    toDisplayString(_ctx.count),
    1
  )
}

六、compiler-sfc：.vue 文件是怎么来的？

<template />
<script setup />
<style scoped />

compiler-sfc 做的事：

• 拆块
• script setup → 普通 setup
• CSS scopeId 注入
• template 交给 compiler-dom

七、为什么 template 性能比 JSX 更稳定？

一句话总结：JSX 直接写 render 函数，绕过了 compiler（绕过了 PatchFlag、BlockTree、精准 diff）。