【Vue3系列-10】你知道Vue3中全局API的一些变化吗

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

这是本系列文章的第10篇-关于Vue3中全局API的一些变化

往期相关文章可移步：

• 【Vue系列】Vue3新引入的composition API
• Vue3中composition API中ref和reactive函数的使用
• 【Vue系列-3】关于响应式深度监听和非深度监听
•  【Vue3系列-4】关于composition API中的toRaw和markRaw
• 【Vue3系列-5】你知道ref以及toRef和toRefs吗
• 【Vue3系列-6】你可能知道ref，但你知道怎么自定义一个ref吗
• 【Vue3系列-7】你知道Vue3中如何通过ref属性获取DOM元素吗
• 【Vue3系列-8】关于Vue3中传送门组件的使用
• 【Vue3系列-9】你知道Fragments和emits选项吗

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

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

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