以前(Vue2.x)
import Vue from 'vue'import App from './App.vue'Vue.config.ignoredElements = [/^app-/]Vue.use(/* ... */)Vue.mixin(/* ... */)Vue.component(/* ... */)Vue.directive(/* ... */)new Vue({ render: h => h(App)}).$mount('#app')
当前(Vue3.0)
import { createApp } from 'vue'import App from './App.vue'const app = createApp(App)app.config.ignoredElements = [/^app-/]app.use(/* ... */)app.mixin(/* ... */)app.component(/* ... */)app.directive(/* ... */)app.mount('#app')
新全局API
import { createApp } from 'vue'import App from './App.vue'const app = createApp(App)
全局映射API
1.全局配置
Vue.config -> app.config
2.注册类型API
Vue.component -> app.componentVue.directive -> app.directiveVue.filter -> app.filter
3.扩展类型API
Vue.mixin -> app.mixinVue.use -> app.use
手动挂载
const rootInstance = app.mount('#app')rootInstance instanceof Vue // true
也可以接受第二参数props
app.mount('#app', { // props to be passed to root component})
依赖注册
// in the entryapp.provide({ [ThemeSymbol]: theme})// in a child componentexport default { inject: { theme: { from: ThemeSymbol } }, template: `
缺陷
Vue2.x中,许多库和插件在UMD构建的时候是自动安装的,如路由vue-router:
自动安装的时候会调用Vue.use(),在上述“扩展类型API”已表明,Vue.use()修正为实例app.use(),Vue.use已不再使用,当然会提供预警信息。