在 Vue2 到 Vue3 的升級(jí)過(guò)程中，除了響應(yīng)式系統(tǒng)、組件寫法等發(fā)生了變化，全局 API 的轉(zhuǎn)移也是一個(gè)非常重要的點(diǎn)。很多初學(xué)者在遷移代碼時(shí)會(huì)遇到報(bào)錯(cuò)，就是因?yàn)?Vue3 不再像 Vue2 那樣把所有 API 掛在 Vue 構(gòu)造函數(shù)上了。

本文就來(lái)詳細(xì)講解一下 Vue 的全局 API 轉(zhuǎn)移。

一、什么是全局 API？

在 Vue2 中，我們經(jīng)常會(huì)寫：

import Vue from 'vue'

// 全局配置
Vue.config.productionTip = false

// 全局注冊(cè)組件
Vue.component('MyComponent', {...})

// 全局注冊(cè)指令
Vue.directive('focus', {...})

// 全局使用插件
Vue.use(MyPlugin)

// 創(chuàng)建實(shí)例
new Vue({
  render: h => h(App),
}).$mount('#app')

可以看到，所有的 API（config、component、directive、use 等）都掛在 Vue 構(gòu)造函數(shù)上。

二、Vue3 為什么要轉(zhuǎn)移？

在 Vue3 中，框架的設(shè)計(jì)理念更加 模塊化 和 可樹搖（Tree-shaking）。
如果還把所有 API 都集中在 Vue 上，會(huì)導(dǎo)致以下問(wèn)題：

1. 包體積大：沒(méi)用到的 API 也會(huì)被打包。
2. 類型推導(dǎo)差：不利于 TS 類型支持。
3. 邏輯不清晰：應(yīng)用級(jí)別的配置與組件實(shí)例混在一起。

因此，Vue3 把全局 API 拆分成了更清晰的模塊。

三、Vue3 的全局 API 轉(zhuǎn)移

在 Vue3 中，所有的應(yīng)用級(jí) API 都轉(zhuǎn)移到了由 createApp 創(chuàng)建的 應(yīng)用實(shí)例（app 實(shí)例） 上。

示例：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 全局配置
app.config.globalProperties.$http = () => {}

// 全局注冊(cè)組件
app.component('MyComponent', {...})

// 全局注冊(cè)指令
app.directive('focus', {...})

// 全局使用插件
app.use(MyPlugin)

// 掛載應(yīng)用
app.mount('#app')

對(duì)比 Vue2，你會(huì)發(fā)現(xiàn)：
 Vue.xxx 變成了 app.xxx。

四、常見(jiàn) API 的遷移對(duì)照表

這樣設(shè)計(jì)的好處是：每個(gè)應(yīng)用實(shí)例都可以有自己獨(dú)立的配置，不會(huì)互相影響，非常適合 多應(yīng)用場(chǎng)景。

五、特殊說(shuō)明

Vue.extend 被移除
Vue3 推薦使用 defineComponent 來(lái)定義組件。

import { defineComponent } from 'vue'

export default defineComponent({
  props: { msg: String },
  setup(props) {
    return () => <div>{ props.msg }</div>
  }
})

Vue.set 和 Vue.delete 移除
在 Vue3 的 Proxy 響應(yīng)式系統(tǒng)下，已經(jīng)不需要 set/delete 這種強(qiáng)制 API 了。

全局過(guò)濾器 Vue.filter 被移除
Vue3 建議用 方法 或 計(jì)算屬性 來(lái)替代。

六、總結(jié)

• Vue2：全局 API 都掛在 Vue 構(gòu)造函數(shù)上。
• Vue3：全局 API 都轉(zhuǎn)移到了 應(yīng)用實(shí)例 app 上。
• 遷移規(guī)則：Vue.xxx → app.xxx。
• 移除了一些過(guò)時(shí) API（Vue.extend、Vue.set、Vue.filter 等）。

這就是所謂的 Vue 全局 API 轉(zhuǎn)移，如果面試官問(wèn)到，可以從 原因、變化、示例、遷移方式 四個(gè)維度回答。

一句話精簡(jiǎn)版回答（面試常用）：
在 Vue2 中，全局 API 掛在 Vue 上；在 Vue3 中，這些 API 都遷移到由 createApp 創(chuàng)建的應(yīng)用實(shí)例上，比如 Vue.use → app.use，Vue.component → app.component，這樣做是為了支持多應(yīng)用和更好的 Tree-shaking。

以上就是Vue3全局API轉(zhuǎn)移的過(guò)程詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue3全局API轉(zhuǎn)移的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論