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 3 更易于扩展，方便添加新的功能和特性。

核心模块概览

Vue 3 的核心模块主要包括以下几个：

模块名称	职责描述	依赖模块
@vue/runtime-core	核心运行时，负责组件实例的创建、更新、渲染，以及响应式系统的实现。是 Vue 3 的核心模块。	@vue/reactivity, @vue/shared
@vue/runtime-dom	基于 DOM 的运行时，提供了在浏览器环境中渲染 Vue 组件的能力。	@vue/runtime-core, @vue/shared
@vue/runtime-test	用于测试的运行时，提供了一个轻量级的虚拟 DOM 环境，方便进行单元测试。	@vue/runtime-core, @vue/shared
@vue/reactivity	响应式系统，负责追踪数据的变化，并在数据发生变化时通知相关的组件进行更新。	@vue/shared
@vue/compiler-core	核心编译器，负责将模板编译成渲染函数。	@vue/shared, @vue/reactivity
@vue/compiler-dom	基于 DOM 的编译器，提供了在浏览器环境中编译 Vue 模板的能力。	@vue/compiler-core, @vue/runtime-dom
@vue/compiler-sfc	单文件组件编译器，负责将 .vue 文件编译成 JavaScript 代码。	@vue/compiler-dom, @vue/compiler-core, @vue/shared
@vue/shared	共享工具函数，提供了一些常用的工具函数，例如类型检查、字符串处理等。	无 (它处于依赖链的底层)
@vue/server-renderer	服务端渲染器，负责将 Vue 组件渲染成 HTML 字符串，用于服务端渲染。	@vue/runtime-core, @vue/runtime-dom, @vue/shared

@vue/runtime-core 运行时核心

@vue/runtime-core 是 Vue 3 的核心运行时模块，它负责组件实例的创建、更新和渲染，以及响应式系统的实现。它是整个框架的基础，其他模块都依赖于它。

核心功能：

• 组件实例管理: 负责创建、更新和销毁组件实例。
• 虚拟 DOM: 定义了虚拟 DOM 的数据结构和操作方法，用于高效地更新 DOM。
• 渲染器: 负责将虚拟 DOM 渲染成真实的 DOM 节点。
• 生命周期钩子: 提供了组件生命周期钩子函数，例如 beforeCreate、created、mounted、updated、unmounted 等。
• 响应式系统集成: 与 @vue/reactivity 模块集成，实现了响应式数据的管理和更新。

代码示例：

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

import { isString, isArray } from '@vue/shared'
import { ReactiveEffect } from '@vue/reactivity'

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

  const patch = (n1, n2, container) => {
    if (n1 === n2) {
      return
    }

    const { type } = n2

    if (isString(type)) {
      // 处理元素节点
      processElement(n1, n2, container)
    } else {
      // 处理组件节点
      processComponent(n1, n2, container)
    }
  }

  const processElement = (n1, n2, container) => {
    if (!n1) {
      mountElement(n2, container)
    } else {
      patchElement(n1, n2)
    }
  }

  const mountElement = (vnode, container) => {
    const { type, props, children } = vnode
    const el = (vnode.el = hostCreateElement(type)) // 创建元素

    if (props) {
      for (const key in props) {
        hostPatchProp(el, key, null, props[key]) // 设置属性
      }
    }

    if (isArray(children)) {
      mountChildren(children, el)
    } else if (isString(children)) {
      hostSetElementText(el, children) // 设置文本内容
    }

    hostInsert(el, container) // 插入到容器中
  }

  const patchElement = (n1, n2) => {
    const el = (n2.el = n1.el)
    const oldProps = n1.props || {}
    const newProps = n2.props || {}

    patchProps(el, newProps, oldProps)

    // TODO: 比较 children
  }

  const patchProps = (el, newProps, oldProps) => {
    //  比较属性，更新属性
    for (const key in newProps) {
        if (newProps[key] !== oldProps[key]) {
            hostPatchProp(el, key, oldProps[key], newProps[key])
        }
    }

    for (const key in oldProps) {
        if (!(key in newProps)) {
            hostPatchProp(el, key, oldProps[key], null)
        }
    }
  }

  const mountChildren = (children, container) => {
    children.forEach(child => {
      patch(null, child, container)
    })
  }

  const processComponent = (n1, n2, container) => {
    if (!n1) {
      mountComponent(n2, container)
    } else {
      updateComponent(n1, n2)
    }
  }

  const mountComponent = (initialVNode, container) => {
    const instance = {
      vnode: initialVNode,
      type: initialVNode.type,
      setupState: {},
      props: initialVNode.props,
      emit: () => {},
      slots: initialVNode.slots,
      isMounted: false,
      next: null // 用于更新
    }

    const { setup } = instance.type

    if (setup) {
      const setupResult = setup(instance.props, { emit: instance.emit })

      instance.setupState = setupResult
    }

    //  渲染函数
    instance.render = instance.type.render;

    effect(() => {
        if (!instance.isMounted) {
            // 初始化
            const subTree = instance.render.call(instance.setupState)
            patch(null, subTree, container)
            instance.vnode.el = subTree.el;
            instance.isMounted = true;
        } else {
            //  更新
            const { next, vnode } = instance;
            if (next) {
                next.el = vnode.el;
                updateComponentPreRender(instance, next);
            }

            const subTree = instance.render.call(instance.setupState)
            const prevSubTree = instance.subTree;
            instance.subTree = subTree;

            patch(prevSubTree, subTree, container)
        }
    })

    initialVNode.component = instance;
  }

  const updateComponent = (n1, n2) => {
    const instance = (n2.component = n1.component);
    instance.next = n2;
    instance.props = n2.props; // 更新 props
    instance.update(); // 触发更新
  }

  const updateComponentPreRender = (instance, nextVNode) => {
      instance.vnode = nextVNode;
      instance.next = null;

      instance.props = nextVNode.props;

  }

  const effect = (fn) => {
    const effect = new ReactiveEffect(fn, () => {
        //  更新
    })

    effect.run()
    instance.update = effect.run.bind(effect);
  }

  return {
    render: (vnode, container) => {
      patch(null, vnode, container)
    }
  }
}

这段代码展示了 createRenderer 函数，它是 @vue/runtime-core 中负责渲染虚拟 DOM 的核心部分。它接收一个 options 对象，该对象包含了平台相关的 DOM 操作方法，例如 createElement、patchProp、insert 等。通过这些方法，渲染器可以将虚拟 DOM 渲染成真实的 DOM 节点。

依赖关系：

@vue/runtime-core 依赖于 @vue/reactivity 模块来实现响应式数据的管理，以及依赖于 @vue/shared 模块来提供一些通用的工具函数。

@vue/compiler-core 核心编译器

@vue/compiler-core 是 Vue 3 的核心编译器模块，它负责将模板编译成渲染函数。渲染函数是组件渲染的核心，它描述了如何将组件的数据渲染成虚拟 DOM。

核心功能：

• 模板解析: 将模板字符串解析成抽象语法树 (AST)。
• AST 转换: 对 AST 进行转换，例如优化、静态分析等。
• 代码生成: 将转换后的 AST 生成渲染函数代码。

代码示例：

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

import { baseParse } from './parse'
import { transform } from './transform'
import { generate } from './generate'

export function compile(template, options = {}) {
  // 1. parse
  const ast = baseParse(template)

  // 2. transform
  transform(
    ast,
    {
      nodeTransforms: options.nodeTransforms || [],
      directiveTransforms: options.directiveTransforms || []
    }
  )

  // 3. generate
  return generate(ast, options)
}

这段代码展示了 compile 函数，它是 @vue/compiler-core 的入口函数。它接收一个模板字符串和一个可选的 options 对象，并返回一个包含渲染函数代码的对象。compile 函数主要分为三个步骤：

1. parse: 使用 baseParse 函数将模板字符串解析成 AST。
2. transform: 使用 transform 函数对 AST 进行转换。transform 函数接收一个 AST 和一个 options 对象，options 对象包含了节点转换函数和指令转换函数，用于对 AST 进行自定义的转换。
3. generate: 使用 generate 函数将转换后的 AST 生成渲染函数代码。

依赖关系：

@vue/compiler-core 依赖于 @vue/shared 模块来提供一些通用的工具函数，例如类型检查、字符串处理等。它也可能依赖于 @vue/reactivity 用于处理一些响应式相关的编译逻辑（例如，将模板中的表达式转换为响应式数据访问）。

@vue/runtime-dom DOM 运行时

@vue/runtime-dom 是基于 DOM 的运行时模块，它提供了在浏览器环境中渲染 Vue 组件的能力。它扩展了 @vue/runtime-core 模块，提供了平台相关的 DOM 操作方法。

核心功能：

• DOM 操作: 提供了创建、更新和删除 DOM 节点的方法。
• 属性设置: 提供了设置 DOM 属性的方法，例如 setAttribute、addEventListener 等。
• 事件处理: 提供了处理 DOM 事件的方法。

代码示例：

// @vue/runtime-dom/src/index.ts (简化版)

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

function createElement(type) {
  return document.createElement(type)
}

function patchProp(el, key, prevValue, nextValue) {
  if (key === 'class') {
    el.className = nextValue || ''
  } else if (key === 'style') {
    // ... 处理 style
  } else if (/^on[A-Z]/.test(key)) {
    // ... 处理事件
  } else {
    if (nextValue === null || nextValue === undefined) {
      el.removeAttribute(key)
    } else {
      el.setAttribute(key, nextValue)
    }
  }
}

function insert(child, parent, anchor = null) {
  parent.insertBefore(child, anchor)
}

function remove(child) {
  const parent = child.parentNode
  if (parent) {
    parent.removeChild(child)
  }
}

function setText(text, textNode) {
    textNode.nodeValue = text;
}

function setElementText(el, text) {
    el.textContent = text;
}

const rendererOptions = {
  createElement,
  patchProp,
  insert,
  remove,
  setText,
  setElementText
}

// only expose createApp
export const createApp = (...args) => {
  const app = createRenderer(rendererOptions).createApp(...args)
  return app
}

这段代码展示了 @vue/runtime-dom 模块的核心部分。它定义了一些 DOM 操作函数，例如 createElement、patchProp、insert 等，并将这些函数传递给 @vue/runtime-core 模块的 createRenderer 函数，从而创建了一个基于 DOM 的渲染器。

依赖关系：

@vue/runtime-dom 依赖于 @vue/runtime-core 模块来实现组件实例的管理和虚拟 DOM 的操作，以及依赖于 @vue/shared 模块来提供一些通用的工具函数。

@vue/compiler-dom DOM 编译器

@vue/compiler-dom 是基于 DOM 的编译器模块，它提供了在浏览器环境中编译 Vue 模板的能力。它扩展了 @vue/compiler-core 模块，提供了平台相关的编译优化和转换。

核心功能：

• DOM 特性优化: 针对 DOM 特性进行优化，例如静态属性提升、事件处理优化等。
• 指令转换: 将 Vue 指令转换成渲染函数代码。

@vue/compiler-dom 通常会添加特定于 DOM 环境的转换规则和优化。例如，它可能会处理 v-bind:style 和 v-on 指令，生成更高效的 DOM 操作代码。它还会利用浏览器 API 来优化静态内容的渲染。

依赖关系：

@vue/compiler-dom 依赖于 @vue/compiler-core 模块来实现模板解析、AST 转换和代码生成，以及依赖于 @vue/runtime-dom 模块来了解 DOM 相关的 API 和特性。

@vue/compiler-sfc 单文件组件编译器

@vue/compiler-sfc 是单文件组件编译器模块，它负责将 .vue 文件编译成 JavaScript 代码。.vue 文件是一种特殊的文本文件，它包含了模板、脚本和样式三个部分。

核心功能：

• 文件解析: 将 .vue 文件解析成模板、脚本和样式三个部分。
• 模板编译: 使用 @vue/compiler-dom 模块编译模板。
• 脚本编译: 使用 JavaScript 编译器编译脚本。
• 样式处理: 提取样式代码，并进行处理，例如添加作用域 CSS 等。
• 代码生成: 将编译后的模板、脚本和样式代码生成 JavaScript 代码。

代码示例：

// 假设的简化的 @vue/compiler-sfc 的代码结构 (仅用于说明)

function compileSFCTemplate(templateContent, options) {
  // 使用 @vue/compiler-dom 编译模板
  const compiled = compile(templateContent, options);
  return compiled;
}

function processScript(scriptContent) {
  // 处理脚本代码 (例如，使用 Babel 进行转换)
  // 这里简化，直接返回脚本内容
  return scriptContent;
}

function processStyle(styleContent, scoped) {
  // 处理样式代码 (例如，添加 scoped CSS)
  // 这里简化，直接返回样式内容
  return styleContent;
}

export function compileSFC(source, options) {
  const { template, script, styles } = parseSFC(source); // 假设的解析函数

  const templateCode = template ? compileSFCTemplate(template.content, options) : null;
  const scriptCode = script ? processScript(script.content) : null;
  const styleCode = styles.map(style => processStyle(style.content, style.scoped));

  // 生成最终的 JavaScript 代码 (将模板、脚本和样式组合在一起)
  const code = generateCode(templateCode, scriptCode, styleCode);

  return {
    code,
    errors: []
  };
}

这段代码展示了 compileSFC 函数，它是 @vue/compiler-sfc 模块的入口函数。它接收一个 .vue 文件的内容和一个可选的 options 对象，并返回一个包含 JavaScript 代码的对象。compileSFC 函数主要分为以下几个步骤：

1. 文件解析: 使用 parseSFC 函数将 .vue 文件解析成模板、脚本和样式三个部分。
2. 模板编译: 使用 compileSFCTemplate 函数编译模板。
3. 脚本编译: 使用 processScript 函数编译脚本。
4. 样式处理: 使用 processStyle 函数处理样式代码。
5. 代码生成: 使用 generateCode 函数将编译后的模板、脚本和样式代码生成 JavaScript 代码。

依赖关系：

@vue/compiler-sfc 依赖于 @vue/compiler-dom 模块来编译模板，以及依赖于 JavaScript 编译器（例如 Babel）来编译脚本。它还依赖于一些 CSS 处理工具来处理样式代码。

@vue/shared 共享工具函数

@vue/shared 是一个共享工具函数模块，它提供了一些常用的工具函数，例如类型检查、字符串处理等。它是 Vue 3 的基础模块，其他模块都可能依赖于它。

核心功能：

• 类型检查: 提供了各种类型检查函数，例如 isString、isNumber、isObject 等。
• 字符串处理: 提供了各种字符串处理函数，例如 capitalize、camelize 等。
• 数组处理: 提供了各种数组处理函数，例如 isArray、isPlainObject 等。
• 对象处理: 提供了各种对象处理函数，例如 extend、hasOwn 等。

代码示例：

// @vue/shared/src/index.ts (部分)

export const isArray = Array.isArray
export const isObject = (val) => val !== null && typeof val === 'object'

export const isString = (val) => typeof val === 'string'
export const isSymbol = (val) => typeof val === 'symbol'

export const extend = Object.assign

const hasOwnProperty = Object.prototype.hasOwnProperty
export const hasOwn = (val, key) => hasOwnProperty.call(val, key)

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

这段代码展示了 @vue/shared 模块的一些常用工具函数。这些函数被广泛应用于 Vue 3 的各个模块中。

依赖关系：

@vue/shared 模块不依赖于任何其他模块。它处于依赖链的底层。

模块间的关系

• @vue/runtime-core 依赖于 @vue/reactivity 和 @vue/shared。
• @vue/runtime-dom 依赖于 @vue/runtime-core 和 @vue/shared。
• @vue/compiler-core 依赖于 @vue/shared 和 @vue/reactivity（在处理响应式相关逻辑时）。
• @vue/compiler-dom 依赖于 @vue/compiler-core 和 @vue/runtime-dom。
• @vue/compiler-sfc 依赖于 @vue/compiler-dom、@vue/compiler-core 和 @vue/shared。
• @vue/shared 不依赖于任何模块。

这种模块化的设计使得 Vue 3 的代码更加清晰、可维护和可扩展。每个模块专注于特定的功能，降低了代码的复杂性，提高了开发效率。

理解模块化设计的重要性

通过对 Vue 3 内部模块化设计的剖析，我们可以看到模块化设计在大型框架中的重要作用。它不仅提高了代码的可维护性和可扩展性，也使得框架更加灵活，可以根据不同的需求进行定制。理解这些内部机制，对于我们更好地使用 Vue 3，进行性能优化，自定义渲染器开发和源码贡献都非常有帮助。

核心模块职责与联系总结

Vue 3 的模块化设计将框架拆分为多个独立的部分，每个模块都有明确的职责。@vue/runtime-core 是核心运行时，负责组件生命周期和虚拟 DOM 管理；@vue/compiler-core 负责将模板编译成渲染函数；其他模块则围绕这两个核心模块，提供平台相关的扩展和支持。通过理解这些模块的依赖关系和职责，可以更深入地理解 Vue 3 的工作原理。

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