Vue RFCs: Changs on Global APIs and related things

Introduction

I summarized what changes will come in Vue 3, especially about global API related things.

• Self-contained apps
• Tree-shaking support
• APIs that are no longer supported

Self-contained apps

Problem

With Vue 2, all Vue applications in a page are affected by some global APIs at the same time. This is because their behavior derives from only one root constructor, Vue().

// In Page A...

Vue.config.ignoredElements = [/* ... */]
Vue.use(/* ... */)
Vue.mixin(/* ... */)
Vue.component(/* ... */)
Vue.directive(/* ... */)

// will affect all the apps

const appA = new Vue({ ... })
const appB = new Vue({ ... })
const appC = new Vue({ ... })

Solution

As of Vue 3, Vue applications come to be created via createApp() function, and the apps are self-contained and have no influence on each other.

// Vue.use() is no longer available

const appA = createApp({ ... })
const appB = createApp({ ... })
const appC = createApp({ ... })

// Each app has "global" API to change its own behavior only
appA.use(plugin)
appA.config.ignoredElements = [/* ... */]
appA.use(/* ... */)
appA.mixin(/* ... */)
appA.component(/* ... */)
appA.directive(/* ... */)

// And `new Vue().$mount()` is replaced by app's `mount()` method.
app.mount(App, '#app')

If you want to know more detail, see RFC0009.

Tree-shaking support

Problem

While some global APIs change Vue's behavior as above, other don't do that but just provide utilities.

In Vue 2, all global APIs are registered on Vue() constructor function so that they are always included in the bundle files, which results in larger size of bundle files.

Solution

In Vue 3, global APIs which don't change Vue's (or each app's) behavior are no longer registered on Vue() constructor function. In other words, they are no longer automatically included in the bundle files. Instead, we can import them only when we need.

• Vue.nextTick()
• Vue.observable()
• Vue.version
• Vue.compile()
• Vue.set()
• Vue.delete()

import { nextTick } from 'vue'

nextTick().then(() => console.log('hello!'))

If you want to know more detail, see RFC0004.

APIs that are no longer supported

In this section, I will refer to APIs which are no longer supported.

Firstly, Vue.config.productionTip is no longer provided because in most cases there is alternative way to achieve the goal that this API is for. See this part of RFC0009 for more detail.

Secondly, Vue.config.ignoredElements is replaced by config.isCustomElement() function of each application. See this part of RFC0009 from more detail.

Thirdly, Vue.config.keyCodes is no longer available. In Vue 3, KeyboardEvent.key is used as v-on modifier. Actually, KeyboardEvent.keyCode is deprecated and replaced by KeyboardEvent.key. That is, this API is simply redundant. See RFC0014 from more detail.

Summary

In this post, it is explained that Vue 3's Global API changes. I will try to summarized other active RFCs as well.