前端基础：Vue3.0保留选项的写法，由构造函数Vue.xx到实例app.xx

2019-06-24 09:05发布

站内文章 / 后端开发

98 0

女 | 书童

私信

以前（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.component
Vue.directive -> app.directive
Vue.filter -> app.filter

3.扩展类型API

Vue.mixin -> app.mixin
Vue.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 entry
app.provide({
 [ThemeSymbol]: theme
})
// in a child component
export default {
 inject: {
 theme: {
 from: ThemeSymbol
 }
 },
 template: ``
}