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

Vue 3 内部模块化设计：依赖与职责剖析

大家好，今天我们来深入探讨 Vue 3 的内部模块化设计。Vue 3 相比 Vue 2 在架构上进行了大幅重构，最显著的特点之一就是模块化程度更高，代码组织更加清晰。其中，@vue/runtime-core、@vue/compiler-core 等核心模块扮演着至关重要的角色。理解这些模块的依赖关系和各自的职责，有助于我们更深入地理解 Vue 3 的运作机制，也能更好地进行自定义扩展和优化。

一、Vue 3 模块化概览

Vue 3 采用 Monorepo 模式进行管理，所有的模块都放在一个大的仓库中。这种模式方便了模块之间的依赖管理和代码共享。一些核心模块包括：

@vue/runtime-core: 这是 Vue 3 的核心运行时模块，负责管理组件的生命周期、响应式系统、虚拟 DOM 操作等。
@vue/runtime-dom: 针对浏览器环境的运行时模块，它扩展了 runtime-core，提供了操作 DOM 的方法。
@vue/compiler-core: 编译器核心模块，负责将模板解析为渲染函数 (render function)。
@vue/compiler-dom: 针对浏览器环境的编译器模块，它扩展了 compiler-core，处理特定于 DOM 的编译任务。
@vue/reactivity: 独立的响应式系统模块，实现了响应式数据和依赖追踪。
@vue/shared: 包含了多个模块共享的工具函数。
@vue/server-renderer: 用于服务器端渲染 (SSR)。

这些模块之间存在着复杂的依赖关系，它们共同协作，完成了 Vue 3 的各种功能。

二、`@vue/runtime-core`：核心运行时

@vue/runtime-core 是 Vue 3 的心脏，它定义了组件实例的创建、更新、卸载等核心生命周期，并提供了响应式系统和虚拟 DOM 操作的支持。

职责：

组件生命周期管理: 负责组件的挂载 (mount)、更新 (update) 和卸载 (unmount)。
响应式系统集成: 使用 @vue/reactivity 提供的 API，将组件的数据转化为响应式数据，并追踪依赖关系。
虚拟 DOM 操作: 提供创建、更新和 diff 虚拟 DOM 的功能，最终将虚拟 DOM 渲染到真实 DOM 上。
Provide/Inject: 实现跨组件层级的数据共享。
内置组件: 提供 <KeepAlive>, <Transition>, <Teleport> 等内置组件。
自定义渲染器 API: 允许创建自定义渲染器，例如渲染到 Canvas 或 WebGL。

依赖：

@vue/reactivity: 提供响应式系统能力。
@vue/shared: 提供共享的工具函数。

代码示例 (简化)：

// @vue/runtime-core/src/renderer.ts (部分)

import { ReactiveEffect } from '@vue/reactivity'
import { ShapeFlags } from '@vue/shared'

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

  const patch = (n1, n2, container, anchor = null) => {
    const { type, shapeFlag } = n2
    switch (type) {
      case Text:
        processText(n1, n2, container, anchor)
        break
      default:
        if (shapeFlag & ShapeFlags.ELEMENT) {
          processElement(n1, n2, container, anchor)
        } else if (shapeFlag & ShapeFlags.COMPONENT) {
          processComponent(n1, n2, container, anchor)
        }
    }
  }

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

  const mountElement = (vnode, container, anchor) => {
    const { type, props, children, shapeFlag } = vnode
    const el = (vnode.el = hostCreateElement(type))

    if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
      hostSetElementText(el, children)
    } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
      mountChildren(children, el, anchor)
    }

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

    hostInsert(el, container, anchor)
  }

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

    patchProps(el, newProps, oldProps)
    patchChildren(n1, n2, el)
  }

  const patchProps = (el, newProps, oldProps) => {
    // ... diff props and update DOM
  }

  const patchChildren = (n1, n2, el) => {
    // ... diff children and update DOM
  }
  // ... other functions like processComponent, unmountComponent, etc.

  return {
    render: (vnode, container) => {
      if (vnode == null) {
        if (container._vnode) {
          unmount(container._vnode)
        }
      } else {
        patch(container._vnode || null, vnode, container)
      }
      container._vnode = vnode
    }
  }
}

这个简化的例子展示了 createRenderer 函数，它接受一个 options 对象，该对象包含特定于平台的 DOM 操作方法（例如 createElement, patchProp, insert）。patch 函数是虚拟 DOM diff 的核心，它根据不同的 vnode 类型（元素、组件等）调用相应的处理函数。mountElement 函数负责创建新的 DOM 元素，并将其插入到容器中。patchElement 负责比较新旧 vnode 的 props 和 children，并更新 DOM。

重要概念：

VNode (Virtual Node): 虚拟节点，是对真实 DOM 的抽象表示。
Renderer: 渲染器，负责将 VNode 渲染到特定平台上。
Patching: diff 算法的核心，用于比较新旧 VNode，并更新 DOM。
ShapeFlags: 用于标记 VNode 的类型和结构，例如是否包含文本子节点、数组子节点等，以便优化 diff 过程。

三、`@vue/compiler-core`：编译器核心

@vue/compiler-core 负责将 Vue 模板 (template) 编译成渲染函数 (render function)。这个过程包括解析 (parsing)、转换 (transforming) 和代码生成 (code generation) 三个阶段。

职责：

解析 (Parsing): 将模板字符串解析成抽象语法树 (AST)。
转换 (Transforming): 对 AST 进行转换，例如处理指令、优化静态节点等。
代码生成 (Code Generation): 将转换后的 AST 生成渲染函数的 JavaScript 代码。

依赖：

@vue/shared: 提供共享的工具函数。

代码示例 (简化)：

// @vue/compiler-core/src/compile.ts (部分)

import { baseParse } from './parse'
import { transform } from './transform'
import { generate } from './generate'
import { transformElement } from './transforms/transformElement'
import { transformText } from './transforms/transformText'
import { transformIf } from './transforms/vIf'
import { transformFor } from './transforms/vFor'

export function compile(template, options = {}) {
  // 1. Parse: template -> AST
  const ast = baseParse(template, options)

  // 2. Transform: AST -> transformed AST
  const plugins = [
    transformElement,
    transformText,
    transformIf,
    transformFor,
    ...(options.plugins || []) // Allow custom transform plugins
  ]
  transform(
    ast,
    Object.assign({}, options, {
      prefixIdentifiers: options.mode === 'module',
      nodeTransforms: [...plugins]
    })
  )

  // 3. Generate: transformed AST -> render function code
  const code = generate(
    ast,
    Object.assign({}, options, {
      prefixIdentifiers: options.mode === 'module'
    })
  )

  return {
    ast,
    code,
    render: new Function('Vue', code.code)(Vue) // Create render function
  }
}

这个简化的 compile 函数展示了编译过程的三个主要阶段。baseParse 函数将模板解析成 AST。transform 函数对 AST 进行转换，它接受一个 plugins 数组，每个插件负责处理特定的 AST 节点。例如，transformElement 处理元素节点，transformText 处理文本节点，transformIf 处理 v-if 指令，transformFor 处理 v-for 指令。generate 函数将转换后的 AST 生成渲染函数的 JavaScript 代码。

重要概念：

AST (Abstract Syntax Tree): 抽象语法树，是对源代码的抽象表示。
Transform Plugins: 转换插件，用于对 AST 进行转换和优化。
Code Generation: 代码生成，将 AST 转换成可执行的 JavaScript 代码。

四、`@vue/runtime-dom` 和 `@vue/compiler-dom`：平台特定扩展

@vue/runtime-dom 和 @vue/compiler-dom 都是针对浏览器环境的模块。它们扩展了 runtime-core 和 compiler-core，提供了特定于 DOM 的功能。

@vue/runtime-dom 职责：

提供操作 DOM 的 API，例如 createElement, patchProp, insert, remove 等。
注册全局指令，例如 v-model。
处理事件监听。

@vue/compiler-dom 职责：

处理特定于 DOM 的编译任务，例如处理 DOM 属性、事件监听等。
优化 DOM 操作。

依赖关系：

@vue/runtime-dom 依赖 @vue/runtime-core。
@vue/compiler-dom 依赖 @vue/compiler-core。

代码示例 (简化)：

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

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

const rendererOptions = {
  createElement: (tag) => document.createElement(tag),
  patchProp: (el, key, prevValue, nextValue) => {
    if (key === 'class') {
      el.className = nextValue || ''
    } else if (key.startsWith('on')) {
      const event = key.slice(2).toLowerCase()
      el.addEventListener(event, nextValue)
    } else {
      if (nextValue == null || nextValue === false) {
        el.removeAttribute(key)
      } else {
        el.setAttribute(key, nextValue)
      }
    }
  },
  insert: (el, parent, anchor = null) => {
    parent.insertBefore(el, anchor)
  },
  remove: (el) => {
    const parent = el.parentNode
    if (parent) {
      parent.removeChild(el)
    }
  },
  setElementText: (el, text) => {
    el.textContent = text
  },
  createText: (text) => document.createTextNode(text),
  setText: (node, text) => {
    node.nodeValue = text
  },
  nextSibling: (node) => node.nextSibling
}

export const render = createRenderer(rendererOptions).render
export const createApp = (...args) => {
  const app = createRenderer(rendererOptions).createApp(...args)
  const { mount } = app
  app.mount = (containerOrSelector) => {
    const container = typeof containerOrSelector === 'string'
      ? document.querySelector(containerOrSelector)
      : containerOrSelector
    if (!container) {
      throw new Error(`Container element not found`)
    }
    container.innerHTML = '' // clear content before mounting
    mount(container)
  }
  return app
}

这段代码展示了 @vue/runtime-dom 如何扩展 runtime-core。它通过 createRenderer 函数创建一个渲染器，并传入一个 rendererOptions 对象，该对象包含了特定于 DOM 的操作方法。例如，createElement 函数用于创建 DOM 元素，patchProp 函数用于更新 DOM 属性，insert 函数用于将元素插入到 DOM 中，remove 函数用于从 DOM 中移除元素。

五、`@vue/reactivity`：独立的响应式系统

@vue/reactivity 是 Vue 3 中独立的响应式系统模块。它提供了响应式数据、依赖追踪和更新机制。

职责：

响应式数据: 将普通 JavaScript 对象转换为响应式数据，当数据发生变化时，自动触发更新。
依赖追踪: 追踪数据的依赖关系，当数据发生变化时，通知所有依赖该数据的 effect。
Effect: 副作用函数，当依赖的数据发生变化时，effect 会被重新执行。
Computed: 计算属性，根据其他响应式数据计算得出，并缓存结果。
Ref: 对普通值的包装，使其具有响应式能力。

依赖：

@vue/shared: 提供共享的工具函数。

代码示例 (简化)：

// @vue/reactivity/src/index.ts

import { extend, hasChanged } from '@vue/shared'

export function reactive(target) {
  if (typeof target !== 'object' || target === null) {
    return target
  }

  const existingProxy = reactiveMap.get(target)
  if (existingProxy) {
    return existingProxy
  }

  const proxy = new Proxy(target, {
    get(target, key, receiver) {
      track(target, key)
      return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
      const oldValue = target[key]
      const result = Reflect.set(target, key, value, receiver)
      if (hasChanged(value, oldValue)) {
        trigger(target, key)
      }
      return result
    }
  })

  reactiveMap.set(target, proxy)
  return proxy
}

const reactiveMap = new WeakMap()

let activeEffect = null

export class ReactiveEffect {
  constructor(public fn, public scheduler?) {
    this.active = true
    this.deps = []
  }
  run() {
    if (!this.active) {
      return this.fn()
    }
    try {
      activeEffect = this
      return this.fn()
    } finally {
      activeEffect = null
    }
  }
  stop() {
    if (this.active) {
      cleanupEffect(this)
      this.active = false
    }
  }
}

function cleanupEffect(effect) {
  effect.deps.forEach((dep) => {
    dep.delete(effect)
  })
  effect.deps.length = 0
}

export function effect(fn, options: any = {}) {
  const _effect = new ReactiveEffect(fn, options.scheduler)
  _effect.run()

  const runner: any = _effect.run.bind(_effect)
  runner.effect = _effect
  return runner
}

const targetMap = new WeakMap()

export function track(target, key) {
  if (activeEffect) {
    let depsMap = targetMap.get(target)
    if (!depsMap) {
      targetMap.set(target, (depsMap = new Map()))
    }
    let dep = depsMap.get(key)
    if (!dep) {
      depsMap.set(key, (dep = new Set()))
    }
    trackEffects(dep)
  }
}

export function trackEffects(dep) {
  if (activeEffect) {
    dep.add(activeEffect)
    activeEffect.deps.push(dep)
  }
}

export function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) {
    return
  }
  let dep = depsMap.get(key)

  if (dep) {
    triggerEffects(dep)
  }
}

export function triggerEffects(dep) {
  const effects = [...dep]
  for (const effect of effects) {
    if (effect.scheduler) {
      effect.scheduler()
    } else {
      effect.run()
    }
  }
}

这个简化的例子展示了 reactive 函数如何将普通对象转换为响应式对象。它使用 Proxy 拦截对象的 get 和 set 操作，并在 get 操作中调用 track 函数追踪依赖关系，在 set 操作中调用 trigger 函数触发更新。effect 函数用于创建副作用函数，当依赖的数据发生变化时，副作用函数会被重新执行。

重要概念：

Proxy: 用于拦截对象操作，实现响应式数据。
Track: 追踪依赖关系，记录哪些 effect 依赖了哪些数据。
Trigger: 触发更新，通知所有依赖的数据发生变化。
Effect: 副作用函数，当依赖的数据发生变化时，effect 会被重新执行。

六、`@vue/shared`：共享工具函数

@vue/shared 包含多个模块共享的工具函数，例如类型判断、字符串处理、对象操作等。

职责：

提供各种工具函数，减少代码重复。
提高代码的可维护性和可读性。

代码示例 (部分)：

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

export const isObject = (val) => val !== null && typeof val === 'object'
export const isArray = Array.isArray
export const isString = (val) => typeof val === 'string'
export const isNumber = (val) => typeof val === 'number'
export const isFunction = (val) => typeof val === 'function'
export const isSymbol = (val) => typeof val === 'symbol'

export const extend = Object.assign

export const hasChanged = (value, oldValue) => !Object.is(value, oldValue)

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

七、模块依赖关系总结

我们可以用一个表格来总结这些模块的依赖关系：

模块	依赖模块	职责
`@vue/runtime-core`	`@vue/reactivity`, `@vue/shared`	组件生命周期管理、响应式系统集成、虚拟 DOM 操作、Provide/Inject、内置组件、自定义渲染器 API
`@vue/runtime-dom`	`@vue/runtime-core`	提供操作 DOM 的 API、注册全局指令、处理事件监听
`@vue/compiler-core`	`@vue/shared`	解析、转换、代码生成，将模板编译成渲染函数
`@vue/compiler-dom`	`@vue/compiler-core`	处理特定于 DOM 的编译任务、优化 DOM 操作
`@vue/reactivity`	`@vue/shared`	响应式数据、依赖追踪、Effect、Computed、Ref
`@vue/shared`	无	提供各种工具函数

八、掌握模块职责，理解Vue 3运行机制

通过对 Vue 3 内部模块的深入分析，我们可以看到 Vue 3 在模块化设计上的精妙之处。每个模块都专注于特定的职责，并通过清晰的接口与其他模块进行协作。理解这些模块的依赖关系和各自的职责，有助于我们更深入地理解 Vue 3 的运作机制，也能更好地进行自定义扩展和优化。同时，Vue3的模块化设计也为我们提供了一种优秀的架构思路，值得我们在日常开发中借鉴。

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

Vue 3 内部模块化设计：依赖与职责剖析

一、Vue 3 模块化概览

二、@vue/runtime-core：核心运行时

三、@vue/compiler-core：编译器核心

四、@vue/runtime-dom 和 @vue/compiler-dom：平台特定扩展

五、@vue/reactivity：独立的响应式系统

六、@vue/shared：共享工具函数

七、模块依赖关系总结

八、掌握模块职责，理解Vue 3运行机制

发表回复 取消回复

二、`@vue/runtime-core`：核心运行时

三、`@vue/compiler-core`：编译器核心

四、`@vue/runtime-dom` 和 `@vue/compiler-dom`：平台特定扩展

五、`@vue/reactivity`：独立的响应式系统

六、`@vue/shared`：共享工具函数

发表回复取消回复