Vue 3源码深度解析之：`Vue`的`app`实例：它的创建、配置与销毁。

各位靓仔靓女们，今天咱们来聊聊Vue 3里那个神奇的app实例，也就是Vue应用的“大脑”。想象一下，你准备开一家奶茶店，app实例就像是你的店长，负责统筹一切，从点单到收银，再到关门打烊，都得它说了算。

咱们今天就来扒一扒这个“店长”的底裤，看看它是怎么创建的、怎么配置的，最后又是怎么优雅地退场的。

一、createApp：店长的诞生

在Vue 3里，创建app实例不再像以前那样直接 new Vue() 了，而是通过 createApp 函数。这个函数就像是你的“店长招聘启事”，告诉Vue，你要创建一个新的应用实例。

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

const app = createApp(App) // 招聘了一个名叫 App 的店长

这里，App 是你的根组件，可以理解为奶茶店的“门面”，也就是整个应用的入口。createApp 函数会接收这个根组件，然后返回一个app实例，也就是我们的“店长”。

二、app实例：店长的技能

这个app实例可不是个花架子，它身怀各种技能，让我们来逐一看看：

方法	作用	例子
mount(el)	将应用挂载到指定的 DOM 元素上，就像把“店长”安排到奶茶店里。	app.mount('#app') // 把店长安排到 id 为 app 的 div 元素里
unmount()	卸载应用，就像“店长”离职，奶茶店关门了。	app.unmount() // 店长离职，奶茶店关门
component(name, component)	注册全局组件，相当于奶茶店新增了一个特色饮品。	app.component('MyButton', MyButtonComponent) // 奶茶店新增了一款名为 MyButton 的特色饮品
directive(name, directive)	注册全局指令，相当于奶茶店的特殊服务，比如“买二送一”。	app.directive('focus', { mounted: (el) => el.focus() }) // 奶茶店提供一项特殊服务，让顾客的目光聚焦到某个饮品上
provide(key, value)	提供一个依赖，相当于奶茶店的独家秘方，其他饮品可以共享。	app.provide('apiUrl', 'https://api.example.com') // 奶茶店提供一个独家秘方 apiUrl，其他饮品可以共享
config	应用配置对象，可以设置一些全局选项，相当于奶茶店的管理制度。	app.config.errorHandler = (err) => { console.error(err) } // 奶茶店的管理制度规定，如果出了错，要记录下来
use(plugin, options)	使用插件，相当于奶茶店引入新的设备或者管理系统。	app.use(MyPlugin, { name: '奶茶店', address: 'XX街XX号' }) // 奶茶店引入了一个名为 MyPlugin 的设备，并设置了一些参数
mixin(mixin)	全局混入，相当于奶茶店所有饮品都增加了一点“神秘配料”，但要谨慎使用。	app.mixin({ created() { console.log('奶茶店的饮品被创建了') } }) // 奶茶店所有饮品在创建时都会打印一条日志，但要谨慎使用，避免冲突
version	Vue的版本，相当于奶茶店的招牌，告诉顾客这是正宗的Vue 3出品。	console.log(app.version) // 输出 Vue 的版本号
isMounted	查看app实例是否挂载，相当于查看奶茶店是否开门。	console.log(app.isMounted) // 输出 true 或者 false

2.1 mount(el)：安排“店长”上岗

mount 方法是app实例最重要的技能之一，它负责将你的应用挂载到指定的 DOM 元素上。就像是把你的“店长”安排到奶茶店里，让它开始工作。

<div id="app"></div>

app.mount('#app') // 把店长安排到 id 为 app 的 div 元素里

mount 方法接收一个 CSS 选择器或者一个 DOM 元素作为参数，Vue 会将你的根组件渲染到这个元素内部。注意，只能挂载到一个元素上，不能同时挂载到多个元素。

2.2 unmount()：优雅地“关门打烊”

unmount 方法与 mount 方法相反，它负责卸载应用，也就是让“店长”离职，奶茶店关门。

app.unmount() // 店长离职，奶茶店关门

卸载应用会移除所有由 Vue 创建的 DOM 元素，并清理所有相关的资源。通常情况下，你不需要手动调用 unmount 方法，Vue 会在组件销毁时自动卸载应用。但在某些特殊情况下，比如动态切换应用时，你可能需要手动调用 unmount 方法。

2.3 component(name, component)：打造特色饮品

component 方法用于注册全局组件，相当于奶茶店新增了一个特色饮品。全局组件可以在任何组件中使用，无需导入。

import MyButtonComponent from './components/MyButton.vue'

app.component('MyButton', MyButtonComponent) // 奶茶店新增了一款名为 MyButton 的特色饮品

现在，你可以在任何组件中使用 <MyButton> 标签，就像使用原生 HTML 标签一样。

<template>
  <div>
    <MyButton>点我</MyButton>
  </div>
</template>

2.4 directive(name, directive)：提供特殊服务

directive 方法用于注册全局指令，相当于奶茶店的特殊服务，比如“买二送一”。指令可以让你直接操作 DOM 元素，实现一些高级功能。

app.directive('focus', {
  mounted: (el) => el.focus()
}) // 奶茶店提供一项特殊服务，让顾客的目光聚焦到某个饮品上

现在，你可以在任何元素上使用 v-focus 指令，让该元素在挂载后自动获取焦点。

<template>
  <div>
    <input type="text" v-focus />
  </div>
</template>

2.5 provide(key, value) 和 inject：共享独家秘方

provide 方法用于提供一个依赖，相当于奶茶店的独家秘方，其他饮品可以共享。inject 则用于注入这个依赖。它们通常一起使用，用于在组件之间共享数据，而无需通过 props 逐层传递。

app.provide('apiUrl', 'https://api.example.com') // 奶茶店提供一个独家秘方 apiUrl，其他饮品可以共享

然后在子组件中，可以使用 inject 选项来注入这个依赖。

import { inject } from 'vue'

export default {
  setup() {
    const apiUrl = inject('apiUrl') // 获取奶茶店的独家秘方 apiUrl
    console.log(apiUrl) // 输出：https://api.example.com
    return {
      apiUrl
    }
  }
}

2.6 config：制定管理制度

config 对象用于设置一些全局选项，相当于奶茶店的管理制度。通过 config 对象，你可以配置 Vue 的行为，比如错误处理、性能优化等等。

app.config.errorHandler = (err) => {
  console.error(err)
} // 奶茶店的管理制度规定，如果出了错，要记录下来

常用的 config 选项包括：

• errorHandler: 全局错误处理函数，用于捕获组件渲染和事件处理期间发生的错误。
• warnHandler: 全局警告处理函数，用于捕获 Vue 发出的警告信息。
• performance: 是否开启性能追踪，用于分析应用的性能瓶颈。
• compilerOptions: 编译器选项，用于配置 Vue 模板的编译行为。
• globalProperties: 在所有组件实例上暴露的全局属性。

2.7 use(plugin, options)：引入新设备

use 方法用于使用插件，相当于奶茶店引入新的设备或者管理系统。插件可以扩展 Vue 的功能，比如添加全局组件、指令、混入等等。

const MyPlugin = {
  install: (app, options) => {
    // 添加全局组件
    app.component('MyComponent', {
      template: `<div>来自插件的组件：{{ options.name }}</div>`
    })
    // 添加全局指令
    app.directive('my-directive', {
      mounted: (el) => {
        el.textContent = '来自插件的指令'
      }
    })
    // 添加全局属性
    app.config.globalProperties.$myProperty = options.address
  }
}

app.use(MyPlugin, { name: '奶茶店', address: 'XX街XX号' }) // 奶茶店引入了一个名为 MyPlugin 的设备，并设置了一些参数

插件通常是一个对象，包含一个 install 方法。install 方法接收 app 实例和一些选项作为参数，你可以在 install 方法中执行任何你想要的操作，比如注册组件、指令、混入等等。

2.8 mixin(mixin)：添加“神秘配料”

mixin 方法用于全局混入，相当于奶茶店所有饮品都增加了一点“神秘配料”。混入可以让你在所有组件中共享一些逻辑，比如生命周期钩子、方法、计算属性等等。

app.mixin({
  created() {
    console.log('奶茶店的饮品被创建了')
  }
}) // 奶茶店所有饮品在创建时都会打印一条日志，但要谨慎使用，避免冲突

需要注意的是，全局混入会影响所有组件，可能会导致一些意想不到的问题。因此，要谨慎使用全局混入，尽量避免冲突。通常情况下，建议使用局部混入，只在需要的组件中使用混入。

三、app实例的配置

除了上面提到的方法，app实例还可以通过 config 对象进行更细致的配置。这些配置项就像是奶茶店的各种规章制度，决定了奶茶店的运营方式。

配置项	作用	例子
errorHandler	全局错误处理函数，用于捕获组件渲染和事件处理期间发生的错误。	app.config.errorHandler = (err, instance, info) => { console.error(err, instance, info) } // 奶茶店规定，如果饮品出了问题，要记录错误信息、哪个“店员”（组件实例）出的错，以及错误来源。
warnHandler	全局警告处理函数，用于捕获 Vue 发出的警告信息。	app.config.warnHandler = (msg, instance, trace) => { console.warn(msg, instance, trace) } // 奶茶店规定，如果系统发出警告，要记录警告信息、哪个“店员”（组件实例）发出的警告，以及警告的调用栈。
performance	是否开启性能追踪，用于分析应用的性能瓶颈。	app.config.performance = process.env.NODE_ENV !== 'production' // 奶茶店规定，只有在开发模式下才开启性能追踪，生产模式下关闭，避免影响性能。
compilerOptions	编译器选项，用于配置 Vue 模板的编译行为。可以设置 isCustomElement 来允许自定义元素，或者设置 whitespace 来控制模板中的空白字符。	app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('x-') // 奶茶店规定，以 x- 开头的标签都是自定义元素，允许使用。
globalProperties	在所有组件实例上暴露的全局属性。相当于奶茶店的“公共资源”，所有“店员”（组件实例）都可以使用。	app.config.globalProperties.$http = axios // 奶茶店提供一个名为 $http 的公共资源，所有“店员”（组件实例）都可以使用它来发起 HTTP 请求。
unwrapInjectedRef	控制inject是否解包ref对象，默认是false，不解包。	app.config.unwrapInjectedRef = true // 奶茶店规定，inject注入的ref需要解包，方便直接使用其值。

四、app实例的销毁

当你的应用不再需要时，你需要销毁app实例，释放资源。这就像是奶茶店关门打烊，需要清理所有设备，清点库存。

销毁app实例的方法是调用 unmount() 方法，前面已经介绍过了。

app.unmount() // 奶茶店关门打烊

unmount() 方法会移除所有由 Vue 创建的 DOM 元素，并清理所有相关的资源。这可以避免内存泄漏，提高应用的性能。

五、总结

app实例是 Vue 3 应用的核心，它负责管理整个应用的生命周期。通过 createApp 函数创建app实例，然后使用 mount 方法将应用挂载到 DOM 元素上。app实例提供了各种方法，用于注册组件、指令、混入等等，以及配置应用的各种选项。最后，使用 unmount 方法销毁app实例，释放资源。

理解app实例的创建、配置和销毁，可以帮助你更好地理解 Vue 3 的工作原理，编写更高效、更稳定的应用。

好了，今天的讲座就到这里，希望大家对Vue 3的app实例有了更深入的了解。下次再见！