分析 Vue 3 渲染器中 `renderer` 模块的 `createApp` 方法如何创建应用实例，并初始化渲染过程。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好，今天咱们来聊聊 Vue 3 渲染器中的 renderer 模块，特别是那个神奇的 createApp 方法。这玩意儿是 Vue 应用的起点，它就像个超级孵化器，把你的组件代码变成能跑在浏览器上的真实 DOM 节点。咱们一步一步解剖它，看看它到底是怎么工作的。

开场白：Vue 应用的宇宙大爆炸

想象一下，Vue 应用就像一个宇宙，而 createApp 就是那个创造宇宙的大爆炸。它接收你的根组件，然后开始一系列初始化操作，最终把你的应用挂载到页面上。没有 createApp，你的 Vue 代码就只是一堆静态文件，没法动起来。

createApp 方法的真面目

首先，咱们来看看 createApp 方法长什么样。它实际上是一个函数，定义在 packages/runtime-dom/src/index.ts 文件中（如果你用的是 Vue 3 的 runtime-dom 版本）。它的核心逻辑是委托给 packages/runtime-core/src/apiCreateApp.ts 中的 createAppAPI 来实现的。

// packages/runtime-dom/src/index.ts
import { createRenderer } from '@vue/runtime-core'

// 省略其他代码

const { render, createApp } = createRenderer(rendererOptions)

export {
  // 省略其他代码
  createApp
}

// packages/runtime-core/src/apiCreateApp.ts

export function createAppAPI<HostElement>(
  render: RootRenderFunction<HostElement>
): CreateAppFunction<HostElement> {
  return function createApp(rootComponent: Component, rootProps: Data | null = null) {
    // 省略内部逻辑
  }
}

看到没？createApp 实际上是由 createRenderer 创建出来的。createRenderer 接收一些平台相关的选项（比如在浏览器中如何创建 DOM 元素），然后返回一个包含 render 和 createApp 方法的对象。

createApp 内部的乾坤

好，现在咱们进入 createApp 的内部，看看它都干了些什么。

创建 App 上下文 (App Context)

createApp 首先会创建一个 App 上下文。这个上下文就像一个全局的容器，存储了应用级别的信息，比如全局组件、全局指令、全局混入、插件等等。

const context = createAppContext()

createAppContext 函数负责创建这个上下文对象。它里面主要包含以下信息：

属性	类型	描述
`app`	`App<HostElement>`	应用实例本身
`config`	`AppConfig`	应用配置，包括全局组件、指令、混入、编译器选项等
`mixins`	`ComponentOptions[]`	全局混入
`components`	`Record<string, Component>`	全局注册的组件
`directives`	`Record<string, Directive>`	全局注册的指令
`provides`	`Record<string \| symbol, any>`	provide/inject 的 provide 数据
`optionsCache`	`WeakMap<Component, ComponentOptions>`	组件选项缓存，用于性能优化
`propsCache`	`WeakMap<Component, string[]>`	组件 props 缓存，用于性能优化
`emitsCache`	`WeakMap<Component, EmitsOptions>`	组件 emits 缓存，用于性能优化
`plugins`	`any[]`	已经安装的插件
`mixins`	`ComponentOptions[]`	全局混入
`isNativeTag`	`(tag: string) => boolean`	判断是否是原生标签的函数，由平台提供
`directive`	`(name: string, directive: Directive) => App`	注册全局指令
`component`	`(name: string, component: Component) => App`	注册全局组件
`use`	`(plugin: Plugin, ...options: any[]) => App`	安装插件
`mixin`	`(mixin: ComponentOptions) => App`	注册全局混入

创建 App 实例

有了 App 上下文，就可以创建真正的 App 实例了。这个实例是一个对象，包含了 mount、unmount、provide、component、directive、use、mixin 等方法。这些方法允许你对应用进行各种配置和操作。

const app = {
  _uid: uid++,
  _component: rootComponent as ConcreteComponent,
  _props: rootProps,
  _container: null,
  _context: context,
  _instance: null,

  version,

  get config() {
    return context.config
  },

  set config(v) {
    if (__DEV__) {
      warn(
        `app.config cannot be replaced. Modify individual options instead.`
      )
    }
  },

  use(plugin: Plugin, ...options: any[]) {
      // 省略插件安装逻辑
  },

  mixin(mixin: ComponentOptions) {
      // 省略混入逻辑
  },

  component(name: string, component: Component) {
      // 省略组件注册逻辑
  },

  directive(name: string, directive: Directive) {
      // 省略指令注册逻辑
  },

  mount(rootContainer: HostElement | string, isHydrate?: boolean, isSVG?: boolean): any {
      // 省略挂载逻辑
  },

  unmount() {
      // 省略卸载逻辑
  },

  provide(key: InjectionKey<any> | string | number, value: any) {
      // 省略 provide 逻辑
  }
}

这里要注意几个关键点：

_component: 存储了根组件。
_props: 存储了传递给根组件的 props。
_container: 初始值为 null，在 mount 方法中会被设置为挂载的目标 DOM 元素。
_context: 指向之前创建的 App 上下文。

mount 方法：应用的起飞跑道

mount 方法是整个过程中最关键的一步。它负责将你的 Vue 应用挂载到指定的 DOM 元素上，并启动渲染过程。
```
mount(rootContainer: HostElement | string, isHydrate?: boolean, isSVG?: boolean): any {
  if (!isMounted) {
    const container = normalizeContainer(rootContainer)
    if (!container) {
      if (__DEV__) {
        warn(`Invalid container: ${rootContainer}`)
      }
      return
    }

    app._container = container

    // 清空容器
    container.innerHTML = ''

    const vnode = createVNode(rootComponent as ConcreteComponent, rootProps)
    // store app context on the root VNode.
    // this will be set on the root instance on initial mount.
    vnode.appContext = context

    // HMR root check
    if (__DEV__) {
      (context.config.globalProperties as any).__VUE_DEVTOOLS_ROOT_COMPONENT__ = vnode
    }

    // 调用 render 函数进行渲染
    render(vnode, container, isSVG)

    isMounted = true
    return getExposeProxy(vnode.component!) || vnode.component!.proxy
  } else if (__DEV__) {
    warn(
      `App has already been mounted. Create a new app instance instead.`
    )
  }
}
```
mount 方法的步骤：
- 规范化容器 (Normalize Container): 将传入的 rootContainer 参数规范化为一个 DOM 元素。如果传入的是字符串，则尝试使用 document.querySelector 获取对应的元素。
- 清空容器: 在挂载之前，通常会清空容器的内容，以确保应用从一个干净的状态开始渲染。
- 创建根 VNode (Create Root VNode): 使用根组件和 props 创建一个根 VNode。VNode 是 Vue 中对 DOM 节点的一种抽象表示，它包含了节点的信息，比如标签名、属性、子节点等等。
- 存储 App 上下文: 将 App 上下文存储到根 VNode 上。这样，在后续的渲染过程中，就可以访问到 App 上下文中的信息。
- 调用 render 函数: 这是最关键的一步！调用 render 函数将根 VNode 渲染到容器中。render 函数会递归地遍历 VNode 树，并根据 VNode 的信息创建对应的 DOM 节点，然后将这些节点插入到容器中。
render 函数：VNode 到 DOM 的桥梁

render 函数是渲染器的核心。它接收一个 VNode 和一个容器，然后将 VNode 渲染到容器中。
```
// 简化后的 render 函数
const render = (vnode: VNode, container: HostElement, isSVG?: boolean) => {
  patch(null, vnode, container, null, null, null, isSVG)
}
```
render 函数实际上只是调用了 patch 函数。patch 函数是 Vue 渲染器的核心算法，它负责比较新旧 VNode，并根据比较结果更新 DOM 节点。

patch 函数：Vue 渲染器的灵魂

patch 函数的功能非常强大，也相当复杂。它可以处理以下几种情况：

初次渲染 (Mount): 当旧 VNode 为 null 时，表示是初次渲染。patch 函数会根据新 VNode 的信息创建对应的 DOM 节点，并将这些节点插入到容器中。
更新 (Update): 当旧 VNode 存在时，表示需要进行更新。patch 函数会比较新旧 VNode 的差异，并根据差异更新 DOM 节点。更新可能涉及到以下几种操作：
- 属性更新: 更新 DOM 节点的属性，比如 class、style、id 等。
- 文本更新: 更新文本节点的内容。
- 子节点更新: 更新 DOM 节点的子节点。子节点更新又可以分为以下几种情况：
  - 添加新节点: 如果新 VNode 中有旧 VNode 中没有的子节点，则需要创建新的 DOM 节点，并将它们插入到 DOM 树中。
  - 删除旧节点: 如果旧 VNode 中有新 VNode 中没有的子节点，则需要将这些 DOM 节点从 DOM 树中移除。
  - 移动节点: 如果新旧 VNode 中的子节点顺序不同，则需要移动 DOM 节点，以保持与新 VNode 相同的顺序。
  - 更新现有节点: 如果新旧 VNode 中都有相同的子节点，则需要递归地调用 patch 函数，更新这些子节点。

patch 函数的实现细节非常复杂，涉及到大量的优化技巧。这里我们只简单介绍一下它的基本流程：

判断 VNode 类型: 首先，patch 函数会判断 VNode 的类型。VNode 可以是组件、元素、文本节点、注释节点等等。
处理不同类型的 VNode: 根据 VNode 的类型，patch 函数会采取不同的处理方式。
- 组件: 如果 VNode 是组件，则会创建组件实例，并调用组件的 setup 函数。然后，将组件的渲染函数返回的 VNode 递归地调用 patch 函数进行渲染。
- 元素: 如果 VNode 是元素，则会创建对应的 DOM 节点，并设置节点的属性。然后，递归地调用 patch 函数，渲染元素的子节点。
- 文本节点: 如果 VNode 是文本节点，则会创建对应的文本节点，并将文本内容设置到节点上。
- 注释节点: 如果 VNode 是注释节点，则会创建对应的注释节点。
比较新旧 VNode: 如果旧 VNode 存在，则需要比较新旧 VNode 的差异，并根据差异更新 DOM 节点。

总结：createApp 的生命历程

现在，咱们可以总结一下 createApp 方法的整个流程了：

创建 App 上下文: 创建一个全局的容器，存储应用级别的信息。
创建 App 实例: 创建一个 App 实例，包含各种配置和操作方法。
调用 mount 方法: 将 App 实例挂载到指定的 DOM 元素上。
创建根 VNode: 使用根组件和 props 创建一个根 VNode。
调用 render 函数: 将根 VNode 渲染到容器中。
patch 函数: render 函数内部会调用 patch 函数，比较新旧 VNode，并根据比较结果更新 DOM 节点。

代码示例：一个简单的 createApp 流程

为了更好地理解 createApp 的流程，咱们来看一个简单的代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>Vue 3 App</title>
</head>
<body>
  <div id="app"></div>

  <script src="https://unpkg.com/vue@3"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: 'Hello, Vue!'
        }
      },
      template: '<h1>{{ message }}</h1>'
    })

    app.mount('#app')
  </script>
</body>
</html>

在这个示例中，我们首先创建了一个 Vue 应用实例，并定义了一个根组件。根组件包含一个 message 数据和一个 template。然后，我们调用 app.mount('#app') 将应用挂载到 id 为 app 的 DOM 元素上。

当 app.mount('#app') 被调用时，Vue 渲染器会按照前面介绍的流程进行渲染：

创建 App 上下文和 App 实例: 创建应用上下文和实例。
找到 #app 元素: 使用 document.querySelector('#app') 找到对应的 DOM 元素。
创建根 VNode: 根据根组件的 template 创建一个根 VNode。
调用 render 函数: 将根 VNode 渲染到 #app 元素中。
patch 函数: render 函数内部会调用 patch 函数，创建 <h1> 元素，并将 message 数据渲染到元素中。

最终，浏览器会显示 "Hello, Vue!"。

总结的总结

createApp 方法是 Vue 3 应用的入口，它负责创建应用实例、配置应用选项、并将应用挂载到 DOM 元素上。理解 createApp 方法的流程，对于深入理解 Vue 3 渲染器的原理至关重要。希望今天的讲解能够帮助你更好地理解 Vue 3 的工作方式。

课后思考

createApp 方法返回的 App 实例有哪些重要的方法？
mount 方法做了哪些关键操作？
patch 函数的作用是什么？
尝试自己编写一个简化版的 createApp 方法。

希望大家多多思考，多多实践，下次再见！

发表回复 取消回复

发表回复取消回复