阐述 Vue 3 源码中 `compiler-core` 和 `runtime-core` 模块的职责划分，以及它们如何协同工作。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！今天咱们来聊聊 Vue 3 源码中两个重量级模块：compiler-core 和 runtime-core。这俩兄弟，一个负责“翻译”，一个负责“执行”，配合得天衣无缝，才有了我们丝滑流畅的 Vue 应用。

咱们先来明确一下目标：搞清楚这两个模块分别负责什么，以及它们是如何一起工作的。争取让大家以后面试的时候，再也不怕被问到这个问题。

一、compiler-core：代码世界的翻译官

compiler-core，顾名思义，是编译器的核心部分。它的主要职责是将 Vue 的模板（template）转换成渲染函数（render function）。简单来说，就是把我们写的 HTML 模版，“翻译”成 JavaScript 代码，让浏览器能够理解并渲染出来。

输入：模板（Template）

这就是我们写的 Vue 组件的 template 部分，可以是 HTML 字符串，也可以是预编译的 AST (Abstract Syntax Tree)。
```
<template>
 <div>
   <h1>{{ message }}</h1>
   <button @click="handleClick">Click me</button>
 </div>
</template>
```
输出：渲染函数（Render Function）

渲染函数是一个 JavaScript 函数，它返回一个 VNode (Virtual Node) 树，描述了组件应该如何渲染。
```
import { createVNode, toDisplayString } from 'vue';

export function render(_ctx, _cache, $props, $setup, $data, $options) {
 return (createVNode("div", null, [
   createVNode("h1", null, toDisplayString(_ctx.message), 1 /* TEXT */),
   createVNode("button", { onClick: _ctx.handleClick }, "Click me")
 ]))
}
```
看到了吗？ compiler-core 最终生成的就是类似上面的 render 函数。它使用了 createVNode 函数来创建虚拟节点，描述了 DOM 结构和事件绑定。

主要流程：

compiler-core 的工作流程可以大致分为以下几个步骤：

解析（Parse）： 将模板字符串解析成抽象语法树（AST）。 AST 是代码的一种抽象表示，方便后续处理。

// 示例：解析 <div id="app">Hello</div>
// 简化后的 AST 结构
{
 type: 'Root',
 children: [
   {
     type: 'Element',
     tag: 'div',
     props: [
       {
         type: 'Attribute',
         name: 'id',
         value: 'app'
       }
     ],
     children: [
       {
         type: 'Text',
         content: 'Hello'
       }
     ]
   }
 ]
}

转换（Transform）： 遍历 AST，进行各种转换和优化。例如：处理指令（v-if、v-for等）、静态提升、事件处理等。这一步是整个编译过程的核心，也是最复杂的部分。

// 示例：转换 v-if 指令
// 原始 AST 节点
{
 type: 'Element',
 tag: 'div',
 directives: [
   {
     type: 'Directive',
     name: 'if',
     exp: 'isShow'
   }
 ],
 children: [ ... ]
}

// 转换后的 AST 节点 (简化)
{
 type: 'If',
 condition: 'isShow',
 consequent: {
   type: 'Element',
   tag: 'div',
   children: [ ... ]
 }
}

生成代码（Generate）： 将转换后的 AST 生成渲染函数字符串。这个过程就是把 AST 转换成 JavaScript 代码。

// 示例：生成 render 函数代码
// AST (简化)
{
 type: 'Element',
 tag: 'div',
 children: [
   {
     type: 'Text',
     content: 'Hello'
   }
 ]
}

// 生成的代码
`
import { createVNode, toDisplayString } from 'vue';
export function render(_ctx, _cache, $props, $setup, $data, $options) {
 return (createVNode("div", null, "Hello"))
}
`

关键模块：
- parse.ts: 负责将模板解析成 AST。
- transform.ts: 负责转换 AST，处理指令、静态提升等。
- generate.ts: 负责将 AST 生成渲染函数代码。
- ast.ts: 定义 AST 的各种节点类型。

二、runtime-core：代码世界的执行者

runtime-core 是 Vue 3 的运行时核心。它的主要职责是：接收 compiler-core 生成的渲染函数，创建 VNode，并将其渲染到真实的 DOM 上。也就是说，它负责执行 compiler-core “翻译”出来的代码。

输入：渲染函数（Render Function）和组件选项（Component Options）

runtime-core 接收 compiler-core 生成的渲染函数，以及组件的各种选项（props、data、methods等）。

// 渲染函数 (compiler-core 生成)
function render(_ctx, _cache, $props, $setup, $data, $options) {
 return (createVNode("div", null, "Hello"))
}

// 组件选项
const componentOptions = {
 data() {
   return {
     message: 'Hello Vue!'
   }
 },
 render // 渲染函数
};

输出：真实的 DOM 节点

runtime-core 的最终目标是将 VNode 树渲染成真实的 DOM 节点，并将其插入到页面中。
```
<div data-v-app="">Hello</div>
```
主要流程：

runtime-core 的工作流程可以大致分为以下几个步骤：
- 创建组件实例（Create Component Instance）： 根据组件选项创建组件实例，初始化 data、props、computed 等。
```
// 示例：创建组件实例
const instance = {
 data: {
   message: 'Hello Vue!'
 },
 props: {},
 // ...
};
```
- 创建 VNode（Create VNode）： 调用渲染函数，生成 VNode 树。
```
// 示例：创建 VNode
const vnode = render(instance); // 调用 render 函数
// vnode 结构 (简化)
{
 type: 'div',
 props: null,
 children: 'Hello'
}
```
- 挂载（Mount）： 将 VNode 树渲染成真实的 DOM 节点，并将其插入到页面中。这是通过一系列的 patch 算法来实现的，它会比较新旧 VNode 树的差异，然后只更新需要更新的部分，从而提高性能。
```
// 示例：挂载 VNode
// 1. 创建 DOM 元素
const el = document.createElement('div');
el.textContent = 'Hello';

// 2. 将 DOM 元素插入到页面中
document.body.appendChild(el);
```
- 更新（Update）： 当组件的数据发生变化时，会重新调用渲染函数生成新的 VNode 树，并与旧的 VNode 树进行比较，然后只更新需要更新的部分。
关键模块：
- renderer.ts: 负责 VNode 的渲染和更新，包含了核心的 patch 算法。
- vnode.ts: 定义 VNode 的结构和相关操作。
- component.ts: 负责组件实例的创建和管理。
- scheduler.ts: 负责任务调度，优化更新性能。
- apiCreateApp.ts: 提供 createApp API，用于创建 Vue 应用。

三、compiler-core 和 runtime-core 如何协同工作？

这两个模块的关系，就像一个翻译员和一个演员。 compiler-core 负责把剧本（模板）翻译成演员能看懂的语言（渲染函数），runtime-core 负责按照剧本的要求进行表演（渲染 DOM）。

编译阶段：compiler-core 负责生成渲染函数
- Vue 在编译阶段，会使用 compiler-core 将模板编译成渲染函数。
- 这个渲染函数会被存储在组件选项中。
运行时阶段：runtime-core 负责执行渲染函数
- 当 Vue 应用启动时，runtime-core 会读取组件选项中的渲染函数。
- runtime-core 调用渲染函数，生成 VNode 树。
- runtime-core 将 VNode 树渲染成真实的 DOM 节点，并将其插入到页面中。
- 当组件的数据发生变化时，runtime-core 会重新调用渲染函数生成新的 VNode 树，并更新 DOM。

流程图：

graph LR
    A[Template] --> B(compiler-core: Parse);
    B --> C(compiler-core: Transform);
    C --> D(compiler-core: Generate);
    D --> E[Render Function];
    E --> F(runtime-core: Create Component Instance);
    F --> G(runtime-core: Create VNode);
    G --> H(runtime-core: Mount / Update);
    H --> I[Real DOM];

表格总结：

模块	职责	主要输入	主要输出	关键模块
`compiler-core`	将 Vue 模板编译成渲染函数，负责模板的解析、转换和代码生成。	Vue 模板 (HTML 字符串或 AST)	渲染函数 (JavaScript 代码)	`parse.ts`, `transform.ts`, `generate.ts`, `ast.ts`
`runtime-core`	接收渲染函数，创建 VNode，并将 VNode 渲染到真实的 DOM 上。负责组件实例的创建、VNode 的渲染和更新。	渲染函数, 组件选项 (props, data, methods)	真实的 DOM 节点	`renderer.ts`, `vnode.ts`, `component.ts`, `scheduler.ts`, `apiCreateApp.ts`

代码示例 (简化版)：

为了更好地理解，咱们用一段简化的代码来演示一下这两个模块是如何协同工作的。

// 1. compiler-core (简化版)
const compilerCore = {
  compile(template) {
    // 假设这里简化了 parse, transform 过程，直接生成 render 函数
    const renderFunction = `
      import { h } from 'vue';
      return function render(_ctx) {
        return h('div', { id: 'app' }, _ctx.message);
      }
    `;
    return renderFunction;
  }
};

// 2. runtime-core (简化版)
const runtimeCore = {
  createApp(componentOptions) {
    return {
      mount(el) {
        const render = new Function(componentOptions.render)(); // 创建 render 函数
        let instance = {
          data: componentOptions.data()
        };

        // 渲染
        const vnode = render.call(null, instance);

        // 简化 VNode 渲染成 DOM 的过程
        const dom = document.createElement(vnode.tag);
        dom.id = vnode.props.id;
        dom.textContent = vnode.children;

        document.querySelector(el).appendChild(dom);
      }
    };
  }
};

// 3. 使用 Vue
const template = '<div id="app">{{ message }}</div>';

// 编译模板
const renderFunction = compilerCore.compile(template);

// 组件选项
const componentOptions = {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  render: renderFunction
};

// 创建 Vue 应用
const app = runtimeCore.createApp(componentOptions);

// 挂载应用
app.mount('#app');

这段代码模拟了 compiler-core 将模板编译成渲染函数，然后 runtime-core 执行渲染函数，并将 VNode 渲染成 DOM 的过程。虽然简化了很多细节，但可以帮助大家更好地理解这两个模块的核心职责。

总结：

compiler-core 负责“翻译”，将模板转换成渲染函数；runtime-core 负责“执行”，将渲染函数生成的 VNode 渲染成真实的 DOM。它们分工明确，协同工作，共同构建了 Vue 3 的核心功能。理解了这两个模块的职责划分，就能更好地理解 Vue 3 的工作原理，也能在面试中更加游刃有余。

希望今天的讲解对大家有所帮助！如果还有什么疑问，欢迎随时提问。下次有机会，咱们可以深入探讨一下 compiler-core 的 AST 转换过程，以及 runtime-core 的 patch 算法。再见！

发表回复 取消回复

发表回复取消回复