分析vue3源码29（编译器的核心实现）

eason_fan
244 阅读5分钟

Vue Compiler-Core 实现分析：核心架构与组件关系

前言

上一节，我们梳理了 vue 的编译流程，vue 借助 vite 插件在构建流程中实现编译。而 vite 插件又引用了 vue 源码中的compiler-core模块，本节我们来分析compiler-core模块的核心架构。

一、整体架构

Compiler-Core 作为 Vue 编译系统的核心，采用了经典的三段式编译器架构：

Template String
      ↓
    解析器 (Parser)
      ↓
    AST (抽象语法树)
      ↓
    转换器 (Transform)
      ↓
    转换后的 AST
      ↓
  代码生成器 (CodeGen)
      ↓
JavaScript 代码

这种架构设计的优势在于：

  • 职责明确，每个阶段专注于特定任务
  • 模块解耦，便于维护和扩展
  • 支持插件化，可以在转换阶段注入自定义转换逻辑

二、核心组件的职责与关系

1. 解析器（Parser）

解析器的主要职责是将模板字符串解析成抽象语法树（AST）。

// 解析器的输入：模板字符串
const input = `
<div class="container">
  <h1 @click="onClick">{{ title }}</h1>
</div>
`

// 解析器的输出：AST
const output = {
  type: NodeTypes.ROOT,
  children: [{
    type: NodeTypes.ELEMENT,
    tag: 'div',
    props: [{
      type: NodeTypes.ATTRIBUTE,
      name: 'class',
      value: { type: NodeTypes.TEXT, content: 'container' }
    }],
    children: [{
      type: NodeTypes.ELEMENT,
      tag: 'h1',
      props: [{
        type: NodeTypes.DIRECTIVE,
        name: 'on',
        arg: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'click' },
        exp: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'onClick' }
      }],
      children: [{
        type: NodeTypes.INTERPOLATION,
        content: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'title' }
      }]
    }]
  }]
}

// 解析器的基本工作流程
template string → 词法分析 → 语法分析 → AST

解析器与其他组件的关系：

  • 为转换器提供标准格式的 AST
  • 不依赖其他组件，是编译流程的起点
  • 生成的 AST 需要满足转换器的处理需求

2. 转换器（Transform）

转换器负责对 AST 进行一系列转换操作，是编译过程中最复杂的部分。

// 转换器的输入：原始 AST（来自解析器的输出）
const input = {
  type: NodeTypes.ROOT,
  children: [/* 与解析器输出的 AST 结构相同 */]
}

// 转换器的输出：转换后的 AST
const output = {
  type: NodeTypes.ROOT,
  children: [{
    type: NodeTypes.ELEMENT,
    tag: 'div',
    codegenNode: {
      type: NodeTypes.VNODE_CALL,
      tag: '"div"',
      props: createObjectExpression([
        createObjectProperty('class', 'container')
      ]),
      children: [{
        type: NodeTypes.VNODE_CALL,
        tag: '"h1"',
        props: createObjectExpression([
          createObjectProperty('onClick', 'onClick')
        ]),
        children: [
          createCallExpression(INTERPOLATION, [
            createSimpleExpression('title')
          ])
        ]
      }]
    }
  }],
  helpers: [
    CREATE_ELEMENT_VNODE,
    TO_DISPLAY_STRING
  ]
}

// 转换器的工作流程
原始 AST → 遍历 → 应用转换插件 → 优化 → 转换后的 AST

转换器的关系网络：

  • 依赖解析器生成的 AST
  • 为代码生成器准备优化后的 AST
  • 通过插件系统与外部转换逻辑交互
  • 管理转换插件的执行顺序

3. 代码生成器（CodeGen）

代码生成器负责将转换后的 AST 转换为可执行的 JavaScript 代码。

// 代码生成器的输入：转换后的 AST（来自转换器的输出）
const input = {
  type: NodeTypes.ROOT,
  children: [/* 与转换器输出的 AST 结构相同 */],
  helpers: [CREATE_ELEMENT_VNODE, TO_DISPLAY_STRING]
}

// 代码生成器的输出：JavaScript 代码字符串
const output = `
import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString } from "vue"

export function render(_ctx, _cache) {
  return _createElementVNode("div", { class: "container" }, [
    _createElementVNode("h1", {
      onClick: _ctx.onClick
    }, _toDisplayString(_ctx.title))
  ])
}
`

// 代码生成的基本流程
转换后的 AST → 表达式生成 → 语句生成 → 代码拼接 → JavaScript 代码

代码生成器的关联：

  • 依赖转换器处理后的 AST
  • 是编译流程的最后一环
  • 生成的代码需要考虑运行时环境

三、组件间的数据流转

1. 数据格式转换

让我们通过一个具体的示例来说明编译过程中的数据格式转换：

  1. Parser 阶段：
    • 输入：原始模板字符串
    • 输出：描述模板结构的 AST
    • 转换重点：将字符串解析为结构化的树形数据
// 1. Parser 的输入：模板字符串
const template = `
<div class="greeting">
  <span>Hello {{ name }}</span>
</div>
`;

// Parser 的输出：AST（抽象语法树）
const ast = {
  type: NodeTypes.ROOT,
  children: [
    {
      type: NodeTypes.ELEMENT,
      tag: "div",
      props: [
        {
          type: NodeTypes.ATTRIBUTE,
          name: "class",
          value: {
            type: NodeTypes.TEXT,
            content: "greeting",
          },
        },
      ],
      children: [
        {
          type: NodeTypes.ELEMENT,
          tag: "span",
          props: [],
          children: [
            {
              type: NodeTypes.TEXT,
              content: "Hello ",
            },
            {
              type: NodeTypes.INTERPOLATION,
              content: {
                type: NodeTypes.SIMPLE_EXPRESSION,
                content: "name",
              },
            },
          ],
        },
      ],
    },
  ],
};
  1. Transform 阶段：
    • 输入：原始 AST
    • 输出：添加了代码生成信息的 AST
    • 转换重点：
      • 添加 codegenNode 用于代码生成
      • 收集 helpers 依赖
      • 进行各种优化转换
// Transform 的输出：转换后的 AST
const transformedAst = {
  type: NodeTypes.ROOT,
  children: [
    {
      type: NodeTypes.ELEMENT,
      tag: "div",
      codegenNode: {
        type: NodeTypes.VNODE_CALL,
        tag: '"div"',
        props: createObjectExpression([
          createObjectProperty("class", "greeting"),
        ]),
        children: [
          /* span 节点的 codegen 信息 */
        ],
      },
      // ... 其他原始 AST 信息保持不变
    },
  ],
  helpers: [CREATE_ELEMENT_VNODE, TO_DISPLAY_STRING],
};
  1. CodeGen 阶段：
    • 输入：转换后的 AST
    • 输出：可执行的 JavaScript 代码
    • 转换重点：
      • 生成 import 语句
      • 生成 render 函数
      • 处理动态绑定和事件处理
// CodeGen 的输出：JavaScript 代码
const generatedCode = `
import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString } from "vue"

export function render(_ctx, _cache) {
  return _createElementVNode("div", { class: "greeting" }, [
    _createElementVNode("span", null, [
      "Hello " + _toDisplayString(_ctx.name)
    ])
  ])
}
`;

通过这个示例，我们可以清晰地看到每个阶段的数据格式是如何演变的，以及每个阶段所添加的关键信息。这种渐进式的转换确保了编译过程的可维护性和可扩展性。

2. 上下文共享

各组件通过 Context 对象共享编译过程中的状态：

interface TransformContext {
  root: RootNode; // AST 根节点
  helpers: Map<symbol>; // 辅助函数集合
  components: Set<string>; // 组件集合
  directives: Set<string>; // 指令集合
  hoists: JSNode[]; // 提升的静态节点
  // ...其他上下文信息
}

四、总结与展望

Compiler-Core 通过清晰的架构设计和组件关系，实现了高度可扩展的编译系统：

  1. 三大核心组件各司其职，协同工作
  2. 数据流转清晰，接口规范统一
  3. 上下文共享机制确保了数据的一致性

在后续文章中，我们将深入探讨每个核心组件的具体实现细节，包括：

  • 解析器的词法分析和语法分析
  • 转换器的具体转换策略
  • 代码生成器的优化技术

通过这些分析，我们将更深入地理解 Vue 编译系统的工作原理。

avatar
文章
阅读
粉丝