Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This is the 10th article in this series – about some of the changes to the global API in Vue3

Previous related articles can be moved:

  • Vue series: Vue3’s new composition API
  • The use of ref and Reactive functions in composition API in Vue3
  • [Vue series-3] About responsive deep listening and non-deep listening
  • [Vue3 series -4] toRaw and markRaw in Composition API
  • Do you know ref as well as toRef and toRefs
  • You may know ref, but do you know how to customize a ref
  • Do you know how to get DOM elements from the ref attribute in Vue3
  • [Vue3 series -8] About the use of portal components in Vue3
  • [Vue3 series -9] Do you know the Fragments and emits options

There are some disruptive changes in VUe3, such as the Global API being changed to application instance calls

There are many global apis in Vue2 that change the behavior of vue. Global apis can cause some problems:

  1. Vue2There is noappThe concept of,new Vue()The resulting root instance acts asapp, so that all created root instancesappAll share the same global configuration, which can contaminate other test cases during testing, making testing difficult
  2. Global configuration also makes it impossible to create multiple different global configurations on a single pageappThe instance

So Vue3 uses the createApp function to return the application instance APP and expose a set of global apis from that app instance

For example, Vue.component in Vue2 is changed to the following format

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')
Copy the code

As you can see, the global component created in Vue2 through a constructor call to Component from Vue is now in the form of an app instance call

Similar changes (vue.component changed to App.component) include:

1. Vue.directive was changed to app.directive

2. Vue.mixin is changed to app.mixin

3. Vue.use is changed to app.use

4. Vue. Config is changed to app.config

5. Vue. Config. IgnoredElements change to app. Config. IgnoredElements

Note: vue.config. productionTip and vue.filter are removed from Vue3