Vue 3的内部模块化设计：`@vue/runtime-core`/`@vue/compiler-core`等模块的依赖与职责

Vue 3 内部模块化设计：@vue/runtime-core/@vue/compiler-core等模块的依赖与职责

大家好，今天我们来深入探讨 Vue 3 的内部模块化设计，重点剖析 @vue/runtime-core、@vue/compiler-core 等核心模块的依赖关系和各自职责。理解这些模块的划分和协作方式，能帮助我们更深入地理解 Vue 3 的运行机制，并为我们定制化 Vue 3 提供可能。

Vue 3 采用了 monorepo 的架构，将整个项目拆分成了多个独立的 npm 包，每个包负责不同的功能。这种模块化的设计带来了诸多好处，例如：

• 更好的代码组织和可维护性： 每个模块职责单一，易于理解和修改。
• 更高的代码复用率： 不同的项目可以共享相同的模块。
• 更小的包体积： 可以按需引入所需的模块，避免引入不必要的代码。
• 更快的构建速度： 可以并行构建不同的模块。

接下来，我们将逐一分析 Vue 3 的几个核心模块，并探讨它们之间的关系。

1. @vue/runtime-core: 运行时核心

@vue/runtime-core 是 Vue 3 的核心模块，负责组件的生命周期管理、虚拟 DOM 的操作、响应式系统的实现等核心功能。它是 Vue 应用运行的基础，任何 Vue 应用都必须依赖它。

主要职责：

• 虚拟 DOM (Virtual DOM)： 定义了虚拟 DOM 的数据结构和操作方法，包括创建、更新、diff 算法等。
• 组件 (Component)： 定义了组件的生命周期钩子 (lifecycle hooks) 和组件实例 (component instance) 的概念，负责组件的创建、挂载、更新和卸载。
• 渲染器 (Renderer)： 负责将虚拟 DOM 渲染成真实的 DOM，并处理 DOM 的更新。
• 响应式系统 (Reactivity)： 实现了响应式数据和依赖追踪机制，使得数据的变化能够自动触发视图的更新。
• 指令 (Directive)： 定义了指令的概念和实现方式，允许开发者扩展 Vue 的功能。
• 插件 (Plugin)： 定义了插件的接口和安装方式，允许开发者扩展 Vue 的功能。
• Provide / Inject： 提供了一种在组件树中传递数据的机制。

依赖关系：

• @vue/runtime-core 依赖于 @vue/reactivity 模块，用于实现响应式系统。
• @vue/shared：提供了一些共享的工具函数。

代码示例 (简化版)：

// @vue/runtime-core/src/renderer.ts (简化版)

import { createVNode, patch } from './vnode';

export function createRenderer(options: RendererOptions) {
  const {
    createElement: hostCreateElement,
    patchProp: hostPatchProp,
    insert: hostInsert,
    remove: hostRemove,
    setElementText: hostSetElementText
  } = options;

  const render = (vnode: VNode | null, container: any) => {
    if (vnode == null) {
      if (container._vnode) {
        hostRemove(container._vnode.el!);
      }
    } else {
      patch(container._vnode || null, vnode, container);
    }
    container._vnode = vnode;
  };

  const patch = (n1: VNode | null, n2: VNode, container: any) => {
    // ... diff 算法和 DOM 更新逻辑
    if (n1 == null) {
      mountElement(n2, container);
    } else {
      patchElement(n1, n2);
    }
  };

  const mountElement = (vnode: VNode, container: any) => {
    const { type, props, children } = vnode;
    const el = hostCreateElement(type);

    if (props) {
      for (const key in props) {
        hostPatchProp(el, key, null, props[key]);
      }
    }

    if (typeof children === 'string') {
      hostSetElementText(el, children);
    } else if (Array.isArray(children)) {
      mountChildren(children, el);
    }

    hostInsert(el, container);
    vnode.el = el; // important
  };

  const patchElement = (n1: VNode, n2: VNode) => {
    // ... 属性更新和子节点更新逻辑
  };

  const mountChildren = (children: any[], container: any) => {
    children.forEach(child => {
      const vnode = createVNode(child);
      mountElement(vnode, container);
    });
  };

  return {
    render
  };
}

// RendererOptions 定义了平台相关的 DOM 操作方法
interface RendererOptions {
  createElement: (type: string) => any;
  patchProp: (el: any, key: string, prevValue: any, nextValue: any) => void;
  insert: (el: any, parent: any, anchor?: any) => void;
  remove: (el: any) => void;
  setElementText: (el: any, text: string) => void;
  // ... 其他平台相关的操作方法
}

这段代码展示了 @vue/runtime-core 中渲染器的基本结构。createRenderer 函数接收一个 RendererOptions 对象，该对象定义了平台相关的 DOM 操作方法。render 函数负责将虚拟 DOM 渲染成真实的 DOM，并处理 DOM 的更新。patch 函数实现了虚拟 DOM 的 diff 算法，用于高效地更新 DOM。

2. @vue/compiler-core: 编译器核心

@vue/compiler-core 负责将 Vue 的模板 (template) 编译成渲染函数 (render function)。它是 Vue 应用构建过程中的重要一环，直接影响着应用的性能和开发效率。

主要职责：

• 解析 (Parsing)： 将模板字符串解析成抽象语法树 (Abstract Syntax Tree, AST)。
• 转换 (Transforming)： 对 AST 进行转换，例如处理指令、表达式等，生成优化后的 AST。
• 代码生成 (Code Generation)： 将转换后的 AST 生成渲染函数代码。

依赖关系：

• @vue/compiler-core 依赖于 @vue/shared 模块，用于提供一些共享的工具函数。
• @vue/runtime-core：一些类型定义和辅助函数。

代码示例 (简化版)：

// @vue/compiler-core/src/parse.ts (简化版)

export function parse(template: string) {
  const context = createParserContext(template);
  return parseChildren(context, []);
}

function createParserContext(source: string) {
  return {
    source,
    options: {
      isVoidTag: () => false // 简化起见，省略 void tag 的判断
    }
  };
}

function parseChildren(context: any, ancestors: any[]) {
  const nodes: any[] = [];

  while (!isEnd(context, ancestors)) {
    const s = context.source;
    let node: any = null;

    if (s.startsWith('{{')) {
      node = parseInterpolation(context);
    } else if (s[0] === '<') {
      if (s[1] === '!') {
        // 注释或DOCTYPE
      } else if (s[1] === '/') {
        // 结束标签
      } else {
        node = parseElement(context, ancestors);
      }
    } else {
      node = parseText(context);
    }

    nodes.push(node);
  }

  return nodes;
}

function isEnd(context: any, ancestors: any[]) {
  const s = context.source;
  if (s.startsWith('</')) {
    return true;
  }

  for (let i = ancestors.length - 1; i >= 0; i--) {
    const tag = ancestors[i].tag;
    if (startsWithEndTagOpen(s, tag)) {
      return true;
    }
  }
  return !s;
}

function startsWithEndTagOpen(source: string, tag: string): boolean {
  return (
    source.startsWith('</') &&
    source.slice(2, 2 + tag.length).toLowerCase() === tag.toLowerCase() &&
    /[>s/]/.test(source[2 + tag.length] || '>')
  );
}

function parseInterpolation(context: any) {
  const [open, close] = ['{{', '}}'];
  advanceBy(context, open.length);
  const closeIndex = context.source.indexOf(close);
  const content = parseTextData(context, closeIndex).trim();
  advanceBy(context, close.length);
  return {
    type: 'Interpolation',
    content: {
      type: 'SimpleExpression',
      content
    }
  };
}

function parseElement(context: any, ancestors: any[]) {
  const element = parseTag(context, ancestors);
  const children = parseChildren(context, ancestors);

  if (startsWithEndTagOpen(context.source, element.tag)) {
    parseTag(context, ancestors); // 消费结束标签
  } else {
    // 缺少闭合标签
  }
  element.children = children;
  return element;
}

function parseTag(context: any, ancestors: any[]): any {
  const match = /^<([a-z][^trnf />]*)/i.exec(context.source)!;
  const tag = match[1];
  advanceBy(context, match[0].length);
  advanceSpaces(context);

  let isSelfClosing = context.source.startsWith('/>');
  advanceBy(context, isSelfClosing ? 2 : 1); // > or />

  const element: any = {
    type: 'Element',
    tag,
    isSelfClosing,
    children: []
  };

  ancestors.push(element);

  return element;
}

function parseText(context: any) {
  const endTokens = ['<', '{{'];
  let endIndex = context.source.length;
  for (let i = 0; i < endTokens.length; i++) {
    const index = context.source.indexOf(endTokens[i]);
    if (index !== -1 && index < endIndex) {
      endIndex = index;
    }
  }
  const content = parseTextData(context, endIndex);
  return {
    type: 'Text',
    content
  };
}

function parseTextData(context: any, length: number): string {
  const text = context.source.slice(0, length);
  advanceBy(context, length);
  return text;
}

function advanceBy(context: any, numberOfCharacters: number): void {
  context.source = context.source.slice(numberOfCharacters);
}

function advanceSpaces(context: any): void {
  const match = /^[trnf ]+/.exec(context.source);
  if (match) {
    advanceBy(context, match[0].length);
  }
}

这段代码展示了 @vue/compiler-core 中解析器的基本结构。parse 函数接收模板字符串作为输入，并返回一个 AST。parseChildren 函数递归地解析模板中的子节点。parseElement、parseInterpolation 和 parseText 函数分别用于解析元素、插值和文本节点。

3. @vue/reactivity: 响应式系统

@vue/reactivity 模块实现了 Vue 3 的响应式系统，负责数据的响应式追踪和更新。它是 Vue 应用的核心组成部分，使得数据的变化能够自动触发视图的更新。

主要职责：

• 响应式数据 (Reactive Data)： 将普通 JavaScript 对象转换成响应式对象，使得对该对象的访问和修改能够被追踪。
• 依赖追踪 (Dependency Tracking)： 记录数据的依赖关系，即哪些组件或计算属性依赖于该数据。
• 触发更新 (Triggering Updates)： 当数据发生变化时，自动触发依赖该数据的组件或计算属性的更新。
• 计算属性 (Computed Properties)： 定义了计算属性的概念和实现方式，允许开发者根据响应式数据计算出新的值。
• 副作用 (Effects)： 允许开发者在数据发生变化时执行一些副作用操作，例如更新 DOM。

依赖关系：

• @vue/reactivity 不依赖于其他 Vue 3 核心模块。
• @vue/shared：提供了一些共享的工具函数。

代码示例 (简化版)：

// @vue/reactivity/src/reactive.ts (简化版)

import { isObject } from '@vue/shared';

const targetMap = new WeakMap<object, Map<any, Set<Function>>>();

export function reactive(target: object) {
  return createReactiveObject(target, mutableHandlers);
}

const mutableHandlers: ProxyHandler<object> = {
  get(target, key, receiver) {
    track(target, key);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    const oldValue = (target as any)[key];
    const result = Reflect.set(target, key, value, receiver);
    if (value !== oldValue) {
      trigger(target, key);
    }
    return result;
  }
};

function createReactiveObject(target: object, baseHandlers: ProxyHandler<object>) {
  if (!isObject(target)) {
    return target;
  }
  const existingProxy = instances.get(target);
  if (existingProxy) {
    return existingProxy;
  }
  const proxy = new Proxy(target, baseHandlers);
  instances.set(target, proxy);
  return proxy;
}

let activeEffect: Function | undefined;

export function effect(fn: Function) {
  activeEffect = fn;
  fn(); // 立即执行一次，收集依赖
  activeEffect = undefined;
}

function track(target: object, key: any) {
  if (!activeEffect) return;
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }
  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep);
  }
  dep.add(activeEffect);
}

function trigger(target: object, key: any) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  const dep = depsMap.get(key);
  if (dep) {
    dep.forEach(effect => {
      effect();
    });
  }
}

const instances = new WeakMap<object, any>();

这段代码展示了 @vue/reactivity 模块中响应式系统的基本结构。reactive 函数将普通 JavaScript 对象转换成响应式对象。effect 函数用于注册副作用函数，该函数会在响应式数据发生变化时自动执行。track 函数用于追踪数据的依赖关系。trigger 函数用于触发依赖该数据的副作用函数的执行。

4. @vue/shared: 共享工具函数

@vue/shared 模块提供了一些在 Vue 3 的各个模块之间共享的工具函数，例如类型判断、字符串处理、对象操作等。

主要职责：

• 类型判断： 提供了一系列类型判断函数，例如 isObject、isArray、isString 等。
• 字符串处理： 提供了一些字符串处理函数，例如 capitalize、camelize 等。
• 对象操作： 提供了一些对象操作函数，例如 extend、hasOwn 等。
• 其他工具函数： 提供了一些其他的工具函数，例如 noop、warn 等。

依赖关系：

• @vue/shared 不依赖于其他 Vue 3 核心模块。

代码示例：

// @vue/shared/src/index.ts

export const isArray = Array.isArray;
export const isObject = (val: any): val is object =>
  val !== null && typeof val === 'object';
export const isString = (val: any): val is string => typeof val === 'string';
export const isSymbol = (val: any): val is symbol => typeof val === 'symbol';
export const isFunction = (val: any): val is Function => typeof val === 'function';

export const hasOwn = (
  val: object,
  key: string | symbol
): key is keyof typeof val => Object.prototype.hasOwnProperty.call(val, key);

export const objectToString = Object.prototype.toString;
export const toTypeString = (value: unknown): string => objectToString.call(value);

export const extend = Object.assign;

const cacheStringFunction = <T extends (str: string) => string>(fn: T): T => {
  const cache: Record<string, string> = Object.create(null)
  return ((str: string) => {
    return cache[str] || (cache[str] = fn(str))
  }) as T
}

const camelizeRE = /-(w)/g
/**
 * @private
 */
export const camelize = cacheStringFunction((str: string): string => {
  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
})

5. @vue/runtime-dom: 运行时 DOM 特定实现

@vue/runtime-dom 模块是 @vue/runtime-core 的特定平台实现，它针对浏览器环境提供了 DOM 操作的具体实现。

主要职责：

• DOM 操作： 实现了 @vue/runtime-core 中定义的 RendererOptions 接口，提供了浏览器环境下的 DOM 操作方法，例如创建元素、更新属性、插入节点等。

依赖关系：

• @vue/runtime-dom 依赖于 @vue/runtime-core 模块，实现了 @vue/runtime-core 中定义的渲染器接口。

代码示例：

// @vue/runtime-dom/src/index.ts

import { createRenderer } from '@vue/runtime-core';

const rendererOptions = {
  createElement: (type: string) => {
    return document.createElement(type);
  },
  patchProp: (el: any, key: string, prevValue: any, nextValue: any) => {
    if (key === 'class') {
      el.className = nextValue || '';
    } else if (key === 'style') {
      // ... style 处理逻辑
    } else {
      el.setAttribute(key, nextValue);
    }
  },
  insert: (el: any, parent: any, anchor: any) => {
    parent.insertBefore(el, anchor || null);
  },
  remove: (el: any) => {
    const parent = el.parentNode;
    if (parent) {
      parent.removeChild(el);
    }
  },
  setElementText: (el: any, text: string) => {
    el.textContent = text;
  }
};

export const render = createRenderer(rendererOptions).render;

模块依赖关系图

为了更清晰地展示这些模块之间的依赖关系，我们可以用一张图表来表示：

模块名称	依赖模块	职责
@vue/runtime-core	@vue/reactivity, @vue/shared	运行时核心，负责组件生命周期管理、虚拟 DOM 操作、响应式系统实现等。
@vue/compiler-core	@vue/shared, @vue/runtime-core	编译器核心，负责将模板编译成渲染函数。
@vue/reactivity	@vue/shared	响应式系统，负责数据的响应式追踪和更新。
@vue/shared	无	共享工具函数，提供类型判断、字符串处理、对象操作等工具函数。
@vue/runtime-dom	@vue/runtime-core	运行时 DOM 特定实现，针对浏览器环境提供了 DOM 操作的具体实现。

模块的协作流程

Vue 3 的各个模块协同工作，共同完成 Vue 应用的构建和运行。其协作流程大致如下：

1. 开发者编写 Vue 组件的模板 (template)。
2. @vue/compiler-core 将模板编译成渲染函数 (render function)。
3. @vue/runtime-core 创建组件实例，并执行渲染函数。
4. 渲染函数返回虚拟 DOM (Virtual DOM)。
5. @vue/runtime-core 使用虚拟 DOM 的 diff 算法，计算出需要更新的 DOM。
6. @vue/runtime-dom 根据计算结果，更新真实的 DOM。
7. @vue/reactivity 负责数据的响应式追踪和更新，当数据发生变化时，自动触发组件的重新渲染。

深入了解 Vue 3 的各个核心模块

通过对 Vue 3 核心模块的分析，我们可以看到 Vue 3 的设计非常模块化，每个模块职责单一，易于理解和维护。这种模块化的设计不仅提高了代码的可复用性，也使得我们可以按需引入所需的模块，从而减小应用的包体积。

理解 Vue 3 的模块化设计，有助于我们更好地理解 Vue 3 的运行机制，并为我们定制化 Vue 3 提供可能。例如，我们可以自定义渲染器，将 Vue 应用渲染到不同的平台上。

结语：模块化设计提升了 Vue 3 的灵活性和可维护性

总而言之，Vue 3 通过精细的模块划分，实现了高度的灵活性和可维护性。各个模块各司其职，协同工作，共同构建了强大的 Vue 应用。深入理解这些模块的依赖和职责，能帮助开发者更好地掌握 Vue 3，并进行更高级的定制和扩展。

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