Vue2.x有许多全局API和配置,它们可以全局改变Vue的行为。例如,要注册全局组件,可以使用Vue.component 或者Vue.direcitve API。这些声明方式虽然很方便,但是也会导致一些问题。在Vue2中,我们通过new Vue 创建的根 Vue 实例。从同一个Vue 构造函数创建的每一个根实例共享相同的全局配置,这会导致两个问题,一是在测试期间,全局配置很容易意外地污染其他测试用例。二是全局配置使得同一个页面上的多个“应用”在全局配置不同时共享一个Vue副本非常困难。
调用 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)
使用 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: ''
})
app.directive('focus', {
mounted: (el) => el.focus()
})
app.mount('#app')
// 现在,所有通过 app.mount() 挂载的应用实例及其组件树,
// 将具有相同的 “button-counter” 组件和 “focus” 指令,
// 而不会污染全局环境
与在 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
指令。