Vue RFCs: Changs on Global APIs and related things
Tags: devjournal, vue
Published: 2020-01-26 14:53:58

# 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()`.

```javascript
// 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.

```javascript
// 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](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md).

## 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()`

```javascript
import { nextTick } from 'vue'

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

If you want to know more detail, see [RFC0004](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0004-global-api-treeshaking.md).

## 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](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md#remove-configproductiontip) for more detail.

Secondly, `Vue.config.ignoredElements` is replaced by `config.isCustomElement()` function of each application. See [this part of RFC0009](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md#configignoredelements---configiscustomelement) 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](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0014-drop-keycode-support.md) 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](https://github.com/vuejs/rfcs/tree/master/active-rfcs) as well.