Vue3迁移指南（一）：全局API应用实例

全局API应用实例

Vue2.x有许多全局API和配置，它们可以全局改变Vue的行为。例如，要注册全局组件，可以使用Vue.component 或者Vue.direcitve API。这些声明方式虽然很方便，但是也会导致一些问题。在Vue2中，我们通过new Vue 创建的根 Vue 实例。从同一个Vue 构造函数创建的每一个根实例共享相同的全局配置，这会导致两个问题，一是在测试期间，全局配置很容易意外地污染其他测试用例。二是全局配置使得同一个页面上的多个“应用”在全局配置不同时共享一个Vue副本非常困难。

一个全新的全局API：createApp

调用 createApp 返回一个应用实例，这是一个Vue3中的新概念。

import { createApp } from 'vue'
const app = createApp({})

如果是使用 CDN 引入的 Vue ，那么 createApp 将通过全局的 Vue 对象暴露。

import { createApp } = Vue
const app = createApp({})

Vue3 把 Vue2 中任何全局改变 Vue 行为的 API 放到了应用实例上，以下是 Vue2 全局API 及其相应的实例API 列表：

2.x 全局 API	3.x 实例API(APP)
Vue.config	app.config
Vue.config.productionTip	移除
Vue.config.ignoreedElements	app.config.compilerOptions.isCustomElement
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use
Vue.prototype	app.config.globalProperties
Vue.extend	移除

所有不会全局改变行为的全局API现在都是具名导出，详细见下一节内容。

改动后的用法如下所示，这里以 Vue.use 为例，其他的API改动用法详见官方文档（用法都大同小异）。

const app = createApp(MyApp)
app.use(VueRouter)

挂载 App 实例

使用 createApp(/* options */) 初始化后，应用实例 app 可通过 app.mount(domTarget) 挂载根组件实例：

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

const app = createApp(MyApp)

app.component('button-counter', {
  data: () => ({
    count: 0
  }),
  template: 'Clicked {{ count }} times.'
})

app.directive('focus', {
  mounted: (el) => el.focus()
})

app.mount('#app')
// 现在，所有通过 app.mount() 挂载的应用实例及其组件树，
// 将具有相同的 “button-counter” 组件和 “focus” 指令，
// 而不会污染全局环境

Provide/Inject

与在 2.x 根实例中使用 provide 选项类似，Vue 3 应用实例也提供了可被应用内任意组件注入的依赖项：

// 在入口中
app.provide('guide', 'Vue 3 Guide')

// 在子组件中
export default {
  inject: {
    book: {
      from: 'guide'
    }
  },
  template: `
{{ book }}
`
}

在编写插件时使用 provide 将尤其有用，可以替代 globalProperties。

在应用之间共享配置

在应用之间共享配置 (如组件或指令) 的一种方法是创建工厂函数，如下所示：

import { createApp } from 'vue'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const createMyApp = (options) => {
  const app = createApp(options)
  app.directive('focus' /* ... */)

  return app
}

createMyApp(Foo).mount('#foo')
createMyApp(Bar).mount('#bar')

现在，Foo 和 Bar 实例及其后代中都可以使用 focus 指令。