Vue3中全局API改为应用程序实例调用

vue3中存在一些具有破坏性的变更,比如Global API改为应用程序实例调用

Vue2中很多全局API会改变vue的行为,全局的API会导致一些问题:

  1. Vue2没有app的概念,new Vue()得到的根实例作为app,这样所有创建的根实例app都是共享相同的全局配置,这在测试时会污染其他测试用例,导致测试困难
  2. 全局配置也导致没有办法在单页面创建不同全局配置的多个app实例

所以,Vue3使用createApp函数返回应用程序实例app,并由这个app实例暴露一系列的全局API

比如,Vue2Vue.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.productionTipVue.filterVue3中被移除

以上是Vue3中全局API的一些变更,使用时需要注意!

You may also like...