Vue 3的内部模块化设计：`@vue/runtime-core`/`@vue/compiler-core`等模块的依赖与职责 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue 3 内部模块化设计：依赖与职责详解

大家好，今天我们来深入探讨 Vue 3 的内部模块化设计，重点分析 @vue/runtime-core、@vue/compiler-core 等核心模块的依赖关系与各自职责。理解这些模块的划分和协作方式，能帮助我们更深入地理解 Vue 3 的运行机制，也能在源码阅读和二次开发时更加得心应手。

Vue 3 采用了 Monorepo 的架构，将整个项目拆分成多个独立发布的 npm 包。这种模块化的设计极大地提高了代码的可维护性、可测试性和可复用性。其中，@vue/runtime-core 和 @vue/compiler-core 是两个最核心的模块，分别负责运行时和编译时的工作。

1. 模块概览

首先，我们来大致了解一下 Vue 3 中一些重要的模块：

模块名称	主要职责
`@vue/runtime-core`	核心运行时，包含创建 Vue 应用实例、组件实例、渲染器、响应式系统等核心功能。它负责将组件的虚拟 DOM 渲染成真实的 DOM，并处理组件的更新和生命周期管理。
`@vue/runtime-dom`	基于浏览器的运行时，对 `@vue/runtime-core` 进行了平台特定的扩展，提供了 DOM 操作相关的 API，例如 `createElement`、`patchProp` 等。它负责将 `@vue/runtime-core` 中的虚拟 DOM 操作转换为真实的 DOM 操作。
`@vue/compiler-core`	核心编译器，负责将模板字符串编译成渲染函数 (render function)。它包含了词法分析、语法分析、代码生成等步骤，并将模板中的指令、表达式等转换为可执行的 JavaScript 代码。
`@vue/compiler-dom`	基于浏览器的编译器，对 `@vue/compiler-core` 进行了平台特定的扩展，处理浏览器相关的指令和特性，例如 `v-bind:class`、`v-on:click` 等。
`@vue/reactivity`	响应式系统，提供了 `reactive`、`ref`、`computed` 等 API，用于创建响应式数据，并在数据发生变化时自动更新视图。它是 Vue 3 实现数据驱动视图的核心模块。
`@vue/shared`	共享工具函数，包含了一些常用的工具函数，例如 `isObject`、`isArray`、`capitalize` 等，被其他模块广泛使用。
`@vue/server-renderer`	服务端渲染器，负责将 Vue 组件渲染成 HTML 字符串，用于服务端渲染 (SSR)。

2. @vue/runtime-core：核心运行时

@vue/runtime-core 是 Vue 3 的心脏，它定义了 Vue 应用的运行时行为。它主要包含以下几个方面的功能：

应用实例 (App Instance)： 提供了 createApp API，用于创建 Vue 应用实例。应用实例是整个 Vue 应用的根节点，负责管理组件树和全局配置。
```
import { createApp } from '@vue/runtime-core'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')
```
组件实例 (Component Instance)： 定义了组件实例的结构和行为。组件实例是 Vue 应用的基本构建块，负责管理组件的状态、生命周期和渲染。
渲染器 (Renderer)： 负责将组件的虚拟 DOM 渲染成真实的 DOM。渲染器使用 patch 算法来比较新旧虚拟 DOM，并只更新需要更新的部分，从而提高渲染性能。
响应式系统 (Reactivity System)： 提供了 reactive、ref、computed 等 API，用于创建响应式数据，并在数据发生变化时自动更新视图. 这个模块虽然独立存在于 @vue/reactivity 中，但 @vue/runtime-core 依赖并整合了它。
生命周期钩子 (Lifecycle Hooks)： 定义了组件的生命周期钩子函数，例如 beforeCreate、created、mounted、updated、unmounted 等。这些钩子函数允许我们在组件的不同生命周期阶段执行自定义的逻辑。
依赖注入 (Dependency Injection)： 提供了 provide 和 inject API，用于在组件之间传递数据，而无需通过 props 逐层传递。

以下是一个简化的组件实例的伪代码，展示了 @vue/runtime-core 中组件实例是如何与渲染器、响应式系统等协作的：

// 伪代码，仅用于演示
class ComponentInstance {
  data: any;
  render: Function;
  vnode: VNode;
  proxy: any; // 响应式代理
  effect: ReactiveEffect; // 响应式副作用

  constructor(options: any) {
    this.data = reactive(options.data || {}); // 使用 reactivity 创建响应式数据
    this.render = options.render;

    this.proxy = new Proxy(this, {
      get(target, key) {
        if (key in target.data) {
          return target.data[key];
        }
        // ... 其他逻辑
        return undefined;
      },
      set(target, key, value) {
        if (key in target.data) {
          target.data[key] = value;
          return true;
        }
        return false;
      },
    });

    this.effect = new ReactiveEffect(() => {
      this.vnode = this.render.call(this.proxy);
      // 使用渲染器更新 DOM
      patch(null, this.vnode, /* container */);
    });
  }

  mount(container: HTMLElement) {
    this.effect.run(); // 首次渲染
  }
}

function patch(n1: VNode | null, n2: VNode, container: HTMLElement) {
  // 简化版的 patch 算法
  if (n1 === null) {
    // 初次渲染
    container.appendChild(createElement(n2.type)); // 创建元素
    // 设置属性
    // ...
  } else {
    // 更新
    // ... 比较新旧 vnode，只更新需要更新的部分
  }
}

function createElement(type: string): HTMLElement {
  return document.createElement(type);
}

这段代码展示了组件实例如何使用 reactive 创建响应式数据，并通过 Proxy 将数据代理到组件实例上。当数据发生变化时，ReactiveEffect 会自动执行 render 函数，生成新的虚拟 DOM，并使用 patch 算法更新 DOM。

3. @vue/compiler-core：核心编译器

@vue/compiler-core 负责将模板字符串编译成渲染函数。它的主要流程如下：

词法分析 (Lexical Analysis)： 将模板字符串分解成一个个的 token (词法单元)。例如，将 <div v-if="isShow">Hello</div> 分解成 <、div、v-if、=、"isShow"、>、Hello、</、div、> 等 token。
语法分析 (Parsing)： 将 token 序列转换成抽象语法树 (AST)。AST 是一个树形结构，用于表示模板的语法结构。
转换 (Transform)： 对 AST 进行转换，例如处理指令、表达式、静态节点等。转换过程会根据不同的指令和特性，对 AST 进行修改和优化。例如，将 v-if="isShow" 转换成相应的 JavaScript 代码，用于控制元素的显示和隐藏。
代码生成 (Code Generation)： 将 AST 转换成渲染函数 (render function)。渲染函数是一个 JavaScript 函数，用于生成虚拟 DOM。

以下是一个简化的模板编译过程的伪代码：

// 伪代码，仅用于演示
function compile(template: string): Function {
  // 1. 词法分析
  const tokens = tokenize(template);

  // 2. 语法分析
  const ast = parse(tokens);

  // 3. 转换
  transform(ast);

  // 4. 代码生成
  const code = generate(ast);

  // 创建渲染函数
  return new Function('return ' + code);
}

function tokenize(template: string): Token[] {
  // 简化版的词法分析
  const tokens: Token[] = [];
  // ...
  return tokens;
}

function parse(tokens: Token[]): ASTNode {
  // 简化版的语法分析
  const ast: ASTNode = {
    type: 'Root',
    children: [],
  };
  // ...
  return ast;
}

function transform(ast: ASTNode) {
  // 简化版的转换
  // 处理指令，例如 v-if, v-for 等
  // ...
}

function generate(ast: ASTNode): string {
  // 简化版的代码生成
  let code = '';
  // ...
  // 将 AST 转换成 JavaScript 代码
  return code;
}

// 示例
const template = `<div v-if="isShow">Hello</div>`;
const render = compile(template);

这段代码展示了模板编译的主要流程。compile 函数接收一个模板字符串作为输入，经过词法分析、语法分析、转换和代码生成等步骤，最终生成一个渲染函数。这个渲染函数可以被 @vue/runtime-core 调用，用于生成虚拟 DOM。

4. @vue/runtime-dom 和 @vue/compiler-dom：平台特定扩展

@vue/runtime-dom 和 @vue/compiler-dom 分别是 @vue/runtime-core 和 @vue/compiler-core 的平台特定扩展，专门用于浏览器环境。它们提供了 DOM 操作相关的 API 和浏览器相关的指令和特性。

@vue/runtime-dom 提供了 createElement、patchProp 等 API，用于将 @vue/runtime-core 中的虚拟 DOM 操作转换为真实的 DOM 操作。
@vue/compiler-dom 扩展了 @vue/compiler-core，处理浏览器相关的指令和特性，例如 v-bind:class、v-on:click 等。

例如，@vue/runtime-dom 中的 patchProp 函数负责更新元素的属性。它会根据属性的类型和值，调用不同的 DOM API 来更新属性。

// @vue/runtime-dom/src/modules/attrs.ts
function patchAttr(el: Element, key: string, nextValue: any) {
  if (nextValue === null) {
    el.removeAttribute(key);
  } else {
    el.setAttribute(key, nextValue);
  }
}

// @vue/runtime-dom/src/patchProp.ts
export const patchProp: PatchPropFn = (
  el: Element,
  key: string,
  prevValue: any,
  nextValue: any,
) => {
  if (key === 'class') {
    patchClass(el, nextValue);
  } else if (key === 'style') {
    patchStyle(el, prevValue, nextValue);
  } else if (/^on[A-Z]/.test(key)) {
    patchEvent(el, key, prevValue, nextValue);
  } else {
    patchAttr(el, key, nextValue);
  }
};

这段代码展示了 patchProp 函数如何根据属性的类型，调用不同的函数来更新属性。例如，如果属性是 class，则调用 patchClass 函数；如果属性是 style，则调用 patchStyle 函数；如果属性是事件监听器，则调用 patchEvent 函数；否则，调用 patchAttr 函数。

5. 依赖关系

以下是一个简化版的依赖关系图：

graph LR
    A[App.vue] --> B((@vue/runtime-dom))
    B --> C((@vue/runtime-core))
    C --> D((@vue/reactivity))
    A --> E((@vue/compiler-dom))
    E --> F((@vue/compiler-core))
    B --> G((DOM API))
    E --> B
    F --> C
    style A fill:#f9f,stroke:#333,stroke-width:2px
    style B fill:#ccf,stroke:#333,stroke-width:2px
    style C fill:#ccf,stroke:#333,stroke-width:2px
    style D fill:#ccf,stroke:#333,stroke-width:2px
    style E fill:#ccf,stroke:#333,stroke-width:2px
    style F fill:#ccf,stroke:#333,stroke-width:2px
    style G fill:#f9f,stroke:#333,stroke-width:2px

从图中可以看出：

@vue/runtime-dom 依赖于 @vue/runtime-core 和 DOM API。
@vue/compiler-dom 依赖于 @vue/compiler-core 和 @vue/runtime-dom。
@vue/runtime-core 依赖于 @vue/reactivity。
App.vue 组件同时使用runtime-dom 和 compiler-dom

6. 模块化设计的优势

Vue 3 的模块化设计带来了以下优势：

可维护性： 将整个项目拆分成多个独立的模块，每个模块负责特定的功能，使得代码更容易理解和维护。
可测试性： 每个模块都可以独立进行测试，提高了代码的质量和可靠性。
可复用性： 某些模块可以被其他项目复用，例如 @vue/reactivity 可以被用于其他需要响应式功能的项目。
灵活性： 可以根据不同的平台和需求，选择不同的模块进行组合，例如可以使用 @vue/runtime-dom 和 @vue/compiler-dom 来构建浏览器端的应用，也可以使用 @vue/server-renderer 来构建服务端渲染的应用。
按需引入： 可以按需引入需要的模块，减少打包体积，提高应用性能。例如，如果使用预编译的渲染函数，可以避免引入整个 compiler 模块。

总结一下：

Vue 3的模块化设计将编译时和运行时进行了解耦，使得代码组织更加清晰，同时提升了代码的可维护性和可复用性。runtime-core是核心运行时，compiler-core是核心编译器，runtime-dom和compiler-dom分别是平台特定扩展，reactivity模块提供了响应式能力。

模块协同，构建完整框架

各个模块分工明确，协同合作，共同构建了一个完整的 Vue 3 框架。编译器负责将模板编译成渲染函数，运行时负责执行渲染函数，生成虚拟 DOM，并将其渲染成真实的 DOM。响应式系统负责管理数据的变化，并在数据发生变化时自动更新视图。

深入理解，助力开发实践

深入理解 Vue 3 的内部模块化设计，能帮助我们更好地理解 Vue 3 的运行机制，也能在源码阅读和二次开发时更加得心应手，最终在实际开发中写出更高质量的代码。

更多IT精英技术系列讲座，到智猿学院

Vue 3 内部模块化设计：依赖与职责详解

发表回复 取消回复

发表回复取消回复