Vue2.x 與 Vue3.x 差異 - 全域 API

本篇為官方文件 Migration from Vue 2 筆記。

全域 API

Vue 2.x 的全域 Vue API 已更改為使用 應用程式實體（application instance）。

Vue 2.x 是透過 Vue 函式建立一個新的 Vue 實體：

1
2
3
4


// Vue 2.x
const vm = new Vue({
  // 選項
});

並且有許多 全域 API 和 全域配置 可以全域改變 Vue 的行為。例如，全域註冊：

1
2
3


// Vue 2.x
Vue.component('my-component', MyComponent);
Vue.directive('my-directive', myDirective);

Vue 2.x 這種宣告方式雖然方便，但也會導致一些問題。從技術上來說，Vue 2.x 並沒有「app」的概念（app 要互相獨立），只是透過 new Vue() 建立根 Vue 實體。當我們從 Vue 函式建立複數根實體，所有根實體將會共享全域環境配置。

為了避免上述問題，在 Vue 3.x 引入了 createApp，用來取代 new Vue()。

呼叫 createApp 函式回傳一個應用實體：

1
2
3
4


// Vue 3.x
const app = Vue.createApp({
  // 選項
});

原本的全域 API 操作改在應用實體上操作：

1
2
3
4


// Vue 3.x
const app = Vue.createApp({});
app.component('my-component', MyComponent);
app.directive('my-directive', myDirective);

應用實體大多數方法都會回傳自己，方便使用鏈式呼叫其它方法：

1
2
3
4


// Vue 3.x
const app = Vue.createApp({})
  .component('my-component', MyComponent)
  .directive('my-directive', myDirective);

對應表：

2.x 全域 API	3.x 應用實體 API (app)
`Vue.config`	`app.config`
`Vue.config.productionTip`	移除
`Vue.config.ignoredElements`	`app.config.isCustomElement`
`Vue.component`	`app.component`
`Vue.directive`	`app.directive`
`Vue.mixin`	`app.mixin`
`Vue.use`	`app.use`
`Vue.prototype`	`app.config.globalProperties`

其他不會全域改變行為的全域 API 都通過 exports 導出，呼叫時需要手動導入，下節會提到。

在 Vue 2.x 中，我們會使用 el 選項作用為掛載 Vue 實體與 DOM 元素的關係。

1
2
3
4


// Vue 2.x
const vm = new Vue({
  el: '#app',
});

或者透過 $mount() 進行手動掛載。

1
2
3
4


// Vue 2.x
const vm = new Vue({});

vm.$mount('#app');

而 Vue 3.x 沒有 el 選項，而是透過 mount 函式手動掛載根節點：

1
2
3
4
5
6


// Vue 3.x
const app = Vue.createApp({
  // 選項
});

const vm = app.mount('#app');

mount 函式與大多數應用方法不同，回傳的是根元件實體，而非應用實體本身。

Vue 3.x 對部分全域 API 實現了 tree-shakable 功能的支持。

Tree shaking 是一個用於描述移除 JavaScript 上下文中的未引用程式碼（dead-code）行為的術語。它依賴於 ES2015 中的 import 和 export 語句，用來檢測程式碼模組是否被導出、導入，且被 JavaScript 檔案使用。

在 Vue 2.x 我們使用全域 API 並不需要手動導入，例如 Vue.nextTick：

1
2
3
4
5
6


// Vue 2.x
import Vue from 'vue';

Vue.nextTick(() => {
  // something DOM-related
});

也就是說，有很多我們沒用到的全域 API 都會被一同打包，造成專案存在多餘的程式碼。

在 Vue 3.x 中，為了能支持 tree-shakable 功能，對全域和內部 API 都經過了重構，明確表示只能透過 ES Modules 構建的命名導出進行訪問。

1
2
3
4
5
6


// Vue 3.x
import { nextTick } from 'vue';

nextTick(() => {
  // something DOM-related
});

Vue 2.x 中的這些全域 API 受此更改的影響：

除了全域 API，Vue3.0 許多內部元件、幫助器也支持 tree-shaking。