Vue 3 源码解析：深入剖析 createApp() 函数

2024-02-11 08:03:11

引言

在 Vue 3 中，createApp() 函数扮演着至关重要的角色，它负责创建 Vue 组件、初始化其生命周期并管理 Vue 实例。作为源码解析系列的最后一章，本文将深入剖析 createApp() 函数，了解其内部机制，为理解 Vue 3 的架构和底层机制奠定坚实的基础。

创建组件

createApp() 函数的第一个作用是创建 Vue 组件。它接收一个组件对象或一个返回组件对象的工厂函数作为参数，并使用它来实例化一个新的 Vue 实例。组件对象包含组件的模板、数据、方法和生命周期钩子等属性。

const App = {
  template: '<div>{{ count }}</div>',
  data() {
    return {
      count: 0
    }
  }
}

const app = createApp(App)

在上述代码中，createApp() 函数创建了一个基于 App 组件对象的 Vue 实例。这个实例拥有 App 组件中的所有属性，包括其模板、数据和方法。

初始化生命周期

createApp() 函数创建 Vue 实例后，它会初始化组件的生命周期。生命周期钩子是 Vue 组件在不同阶段执行的特定方法，例如创建、安装、挂载和销毁。createApp() 函数确保在适当的时刻调用这些钩子。

const app = createApp(App)

app.mount('#app')

在上述代码中，mount() 方法触发了组件的 mounted 生命周期钩子。这个钩子在组件挂载到 DOM 时执行，允许组件执行与 DOM 交互相关的操作。

实例管理

createApp() 函数不仅负责创建和初始化组件，还管理着 Vue 实例。它提供了一系列方法来访问和操作实例，包括：

mount(el): 将组件挂载到指定的 DOM 元素
unmount(): 从 DOM 中卸载组件
destroy(): 销毁组件实例并释放其占用的资源

通过这些方法，开发者可以完全控制 Vue 实例的生命周期和行为。

深入剖析 createApp() 函数

为了深入了解 createApp() 函数的内部机制，我们将其核心实现拆解如下：

export function createApp(rootComponent: App, rootProps = null) {
  const app = ensureRenderer() && (renderer.createApp(rootComponent, rootProps) || null)

  if (app && handleError) {
    app.config.errorHandler = handleError
  }

  const lifecycle = new App(app, rootProps)

  if (lifecycle) {
    setupLifecycle(lifecycle, app)
  }

  return app
}