企业官网建设流程全解析

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

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

编译 .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）。