Vue3中全局API改为应用程序实例调用
2020-11-17 本文已影响0人
深度剖析JavaScript
vue3
中存在一些具有破坏性的变更,比如Global API
改为应用程序实例调用
Vue2
中很多全局API
会改变vue
的行为,全局的API
会导致一些问题:
-
Vue2
没有app
的概念,new Vue()
得到的根实例作为app
,这样所有创建的根实例app
都是共享相同的全局配置,这在测试时会污染其他测试用例,导致测试困难 - 全局配置也导致没有办法在单页面创建不同全局配置的多个
app
实例
所以,Vue3
使用createApp
函数返回应用程序实例app
,并由这个app
实例暴露一系列的全局API
比如,Vue2
中Vue.component
变更为如下形式
import { createApp, h } from 'vue'
import App from './App.vue'
import './index.css'
const app = createApp(App)
.component('comp', { render: () => h('div', 'i am comp!!!') })
.mount('#app')
可以看到,Vue2
中通过Vue
的构造函数调用component
创建全局组件,现在变成有应用实例app
调用的形式
类似的变更(Vue.component
变更为app.component
)还有:
1. Vue.directive变更为app.directive
2. Vue.mixin变更为app.mixin
3. Vue.use变更为app.use
4. Vue.config变更为app.config
5. Vue.config.ignoredElements变更为app.config.ignoredElements
注意:Vue.config.productionTip
和Vue.filter
在Vue3
中被移除
以上是Vue3
中全局API
的一些变更,使用时需要注意!