【Vue3源码学习】— CH3.1 apiCreateApp.ts: 创建Vue应用实例

在Vue 3中，createApp是启动Vue应用的核心。apiCreateApp.ts文件包含了创建Vue应用实例的API，不仅允许开发者挂载根组件，还提供了配置全局属性、指令和组件的能力。本文将深入探讨createApp的工作原理和它提供的各种方法。

1.Vue项目中的应用

Vue项目通常在入口文件通过createApp创建并配置Vue实例，这是整个应用的起点：

import {
    createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

2. 关键概念

2.1 挂载（mount）

挂载过程将Vue应用连接到DOM元素上，是应用启动的关键步骤。通过.mount(selector)方法，Vue将应用的根组件渲染为实际DOM元素并插入指定挂载点。这一步骤是响应式数据变化反映到DOM、用户看到界面内容的先决条件。

2.2 卸载（unmount）

卸载过程涉及从其挂载点移除Vue应用，清除事件监听器和响应式系统，避免内存泄漏。通过.unmount()方法，应用实例从页面中完全移除，停止响应数据变化。

2.3 提供与注入（Provide/Inject）

提供（Provide）和注入（Inject）机制允许跨组件通信，特别适用于深层嵌套组件或需要跨多层传递数据的场景。.provide(key, value)方法定义提供的数据，inject(key)方法在组件内访问由其上游组件（或应用实例）提供的数据或方法。

3. 核心功能

3.1 创建应用实例

createApp函数接收根组件作为参数，返回应用实例。该实例提供方法注册全局组件、指令、混入、提供/注入等，是应用配置的入口。

3.2 实例属性

带有下划线（_）的属性主要用于Vue内部管理和高级用途，通常情况下开发者不需要直接操作这些属性。config属性提供了一个更为官方和安全的方式来修改应用的配置，这是与应用实例交互时更常用的接口。

属性	描述	使用示例
_uid	应用实例的唯一标识符	用于内部管理，通常不需要直接使用
_component	应用的根组件对象	用于引用创建应用时传入的根组件
_props	传递给根组件的props对象	用于存储和访问根组件的props
_container	应用被挂载的DOM容器	在app.mount()后，可用于访问挂载的容器元素
_context	应用的上下文对象，包含应用级别的设置和全局注册	用于访问应用的全局配置和注册
_instance	根组件的实例	在开发工具中可用于访问根组件实例的状态和属性
config	应用的配置对象，允许修改Vue的全局配置	例如，通过app.config.globalProperties添加全局属性

3.3 实例方法

方法	描述
use	用于安装Vue插件
mixin	允许全局注册一个混入，影响之后所有创建的Vue实例
component	全局注册或检索一个组件
directive	全局注册或检索一个指令
mount	挂载Vue应用到DOM元素上
unmount	卸载应用实例
provide	允许应用实例提供一个可以被整个应用中的组件注入的值
runWithContext	在当前应用上下文中执行一个函数

使用示例

//安装Vue Router插件
app.use(router) ;
//添加一个全局混入
app.mixin({
    
    created() {
    console.log('Global Mixin') } 
})
//注册全局组件
app.component('MyComponent', MyComponent) 
//获取全局组件
app.component('MyComponent') 
//注册全局指令
directive('my-directive', {
   }) 
//获取全局指令
app.directive('my-directive') 
//挂载应用到具有id="app"的DOM元素
app.mount('#app') 
//卸载已挂载的Vue应用
app.unmount() 
//提供一个可以被注入的值
app.provide('key', value) 
//执行函数
app.runWithContext(
    () => {
    /* 在应用上下文中执行某些操作 */ }
)

4. 源码解析

4.1 createAppContext

/**
 * 创建一个新的应用上下文
 * 这个上下文对象为整个应用提供了一个全局的作用域，使得在任何地方都可以访问到这些全局注册的资源：
 * 如混入(mixins)、组件、指令、提供的值(provides)等
 */
export function createAppContext(): AppContext {
   
  return {
   
    app: null as any,
    config: {
   
      isNativeTag: NO,
      performance: false,
      globalProperties: {
   },
      optionMergeStrategies: {
   },
      errorHandler: undefined,
      warnHandler: undefined,
      compilerOptions: {
   },
    },
    mixins: [],
    components: {
   },
    directives: {