Vue 3.0 深度剖析：App 的创造与依托

邂逅 Vue 3.0 源码解读：App 创建与挂载之旅（二）

引子

在上一章中，我们揭开了 Vue 3.0 创建应用程序的入口函数 createApp 的神秘面纱。如今，我们将继续深入探寻其内部运作机制，追溯其调用的子函数，逐一解析其职责所在。准备好踏上这趟 App 创建与挂载的代码之旅了吗？

揭秘 createApp

export function createApp(rootComponent: Component, rootProps = null) {
  // ....
}

首先，让我们理清 createApp 的职责：它负责创建 Vue 应用的实例，也就是通常所说的 App 实例。在此过程中，它接收两个参数：根组件和根组件属性。根组件是应用程序的主入口点，而根组件属性则用来初始化根组件。

子函数探秘

  const app = ensureRendererIfBrowser(rootComponent);

ensureRendererIfBrowser 函数检查是否处于浏览器环境。如果确实如此，它将确保存在渲染器（例如 DOM 渲染器）。这一步骤至关重要，因为它为后续的挂载过程做好了准备。

  if (__DEV__) {
    console.log(`[Vue warn]: This App was created with a legacy root component. ` + `Please use the new API instead.`);
  }

在开发模式下，此函数会输出一条警告消息，提醒用户使用新版 API。这有助于防止使用过时的根组件，确保应用程序的现代化。

  // 其他代码

挂载过程

一旦 App 实例创建成功，就可以将其挂载到 DOM 中。这一过程由 mount 函数负责：

  const mount = app.mount(container);

mount 函数接收一个容器作为参数，即要将 App 实例挂载到的 DOM 元素。它执行以下步骤：

• 创建渲染上下文
• 调用 patch 函数应用初始渲染
• 激活挂载的生命周期钩子
• 返回一个 Unmounted 实例，用于卸载和销毁 App

收尾

至此，我们已经探究了 Vue 3.0 中创建 App 和挂载过程的奥秘。通过深入了解 createApp 和 mount 等关键函数，我们不仅加深了对 Vue 内部运作的理解，还为进一步的应用程序开发奠定了坚实的基础。