應(yīng)不應(yīng)該從 Vue 2 升級(jí)到 Vue 3

應(yīng)不應(yīng)該升級(jí)？這個(gè)問(wèn)題不能一概而論。

首先，如果你要開(kāi)啟一個(gè)新項(xiàng)目，那直接使用 Vue 3 是最佳選擇。后面課程里，我也會(huì)帶你使用 Vue 3 的新特性和新語(yǔ)法開(kāi)發(fā)一個(gè)項(xiàng)目。

以前我獨(dú)立使用 Vue 2 開(kāi)發(fā)應(yīng)用的時(shí)候，不管我怎么去組織代碼，我總是無(wú)法避免在 data、template、methods 中上下反復(fù)橫跳，這種弊端在項(xiàng)目規(guī)模上來(lái)之后會(huì)更加明顯。而且由于 vue-cli 是基于 Webpack 開(kāi)發(fā)的，當(dāng)項(xiàng)目規(guī)模上來(lái)后，每執(zhí)行一下，調(diào)試環(huán)境就要 1 分鐘時(shí)間，這也是大部分復(fù)雜項(xiàng)目的痛點(diǎn)之一。

而 Vue 3 的 Composition API 帶來(lái)的代碼組織方式更利于封裝代碼，維護(hù)起來(lái)也不會(huì)上下橫跳。

Vue 3 的正式版已經(jīng)發(fā)布有一年了，無(wú)論是輔助工具，還是周邊庫(kù)都已經(jīng)非常完善了，足以勝任大型的項(xiàng)目開(kāi)發(fā)。并且，現(xiàn)在也有越來(lái)越多的公司正在嘗試和體驗(yàn) Vue 3。所以新項(xiàng)目可以直接擁抱 Vue 3 的生態(tài)，這也是現(xiàn)在很多團(tuán)隊(duì)在做的嘗試。

而且對(duì)于 Vue 2，官方還會(huì)再維護(hù)兩年，但兩年后的問(wèn)題和需求，官方就不承諾修復(fù)和提供解答了，現(xiàn)在繼續(xù)用 Vue 2 其實(shí)是有這個(gè)隱患的。

Vue 3 也不是沒(méi)有問(wèn)題，由于新的響應(yīng)式系統(tǒng)用了 Proxy，會(huì)存在兼容性問(wèn)題。也就是說(shuō)，如果你的應(yīng)用被要求兼容 IE11，就應(yīng)該選擇 Vue 2。而且，Vue 團(tuán)隊(duì)也已經(jīng)放棄 Vue 3 對(duì) IE11 瀏覽器的支持。

其實(shí)，官方原來(lái)是有計(jì)劃在 Vue 3 中支持 IE11，但后來(lái)由于復(fù)雜度和優(yōu)先級(jí)的問(wèn)題，這個(gè)計(jì)劃就擱置了下來(lái)。

不過(guò)，站在 2021 看待現(xiàn)在前端的世界，你能發(fā)現(xiàn)瀏覽器和 JavaScript 本身已經(jīng)有了巨大的發(fā)展。大部分的前端項(xiàng)目都在直接使用現(xiàn)代的語(yǔ)言特性，而且微軟本身也在拋棄 IE，轉(zhuǎn)而推廣 Edge。所以 Vue 官方在重新思考后，決定讓 Vue 3 全面擁抱未來(lái)，把原來(lái)準(zhǔn)備投入到 Vue 3 上支持 IE11 的精力轉(zhuǎn)投給 Vue 2.7。

那么 Vue 2.7 會(huì)帶來(lái)什么內(nèi)容呢?

Vue 2.7 會(huì)移植 Vue 3 的一些新特性，讓你在 Vue 2 的生態(tài)中，也能享受 Vue 3 的部分新特性。在 Vue 3 發(fā)布之前，Vue 2 項(xiàng)目中就可以基于 @vue/composition-api 插件，使用 Composition API 語(yǔ)法，Vue 2 會(huì)直接內(nèi)置這個(gè)插件，在 Vue 2 中默認(rèn)也可以用 Compositon 來(lái)組合代碼。

Vue 3 不兼容的那些寫(xiě)法

通過(guò)前面的分析，在選擇 Vue 2 還是 Vue 3 這個(gè)問(wèn)題上，相信你現(xiàn)在已經(jīng)有了自己的取舍。如果最后你依然決定要升級(jí) Vue 3，那我就先帶你了解一下 Vue 3 不支持的那些寫(xiě)法、之后為你講解它的生態(tài)現(xiàn)狀，最后，我們?cè)龠M(jìn)入到實(shí)操升級(jí)的環(huán)節(jié)。

了解一下 Vue 3 不兼容的那些具體語(yǔ)法，除了可以幫你在升級(jí)項(xiàng)目后，避免寫(xiě)的代碼無(wú)法使用，還會(huì)讓你更好地適應(yīng) Vue 3。詳細(xì)的兼容性變更，官方有一個(gè)遷移指南，我在這里就不一一給出了。同樣，也為了避免八股文的形式，我在這里介紹幾個(gè)重要的變更，后面項(xiàng)目中用到一些寫(xiě)法的時(shí)候，我再詳細(xì)地告訴你。即使現(xiàn)在說(shuō)太多細(xì)節(jié)，可能你也記不住。

這一部分內(nèi)容，主要是針對(duì)有 Vue 2 開(kāi)發(fā)經(jīng)驗(yàn)的，希望更快地適應(yīng) Vue 3 的同學(xué)。在全面實(shí)戰(zhàn) Vue 3 之前，你不必完整閱讀官方的指南，因?yàn)?Vue 3 的大部分 API 都是對(duì) Vue 2 兼容的。

首先，我們來(lái)看一下 Vue 2 和 Vue 3 在項(xiàng)目在啟動(dòng)上的不同之處。在 Vue 2 中，我們使用 new Vue() 來(lái)新建應(yīng)用，有一些全局的配置我們會(huì)直接掛在 Vue 上，比如我們通過(guò) Vue.use 來(lái)使用插件，通過(guò) Vue.component 來(lái)注冊(cè)全局組件，如下面代碼所示：

Vue.component('el-counter', {
  data(){
    return {count: 1}
  },
  template: '<button @click="count++">Clicked {{ count }} times.</button>'
})
let VueRouter = require('vue-router')
Vue.use(VueRouter)

在上面的代碼里，我們注冊(cè)了一個(gè) el-counter 組件，這個(gè)組件是全局可用的，它直接渲染一個(gè)按鈕，并且在點(diǎn)擊按鈕的時(shí)候，按鈕內(nèi)的數(shù)字會(huì)累加。

然后我們需要注冊(cè)路由插件，這也是 Vue 2 中我們使用 vue-router 的方式。這種形式雖然很直接，但是由于全局的 Vue 只有一個(gè)，所以當(dāng)我們?cè)谝粋€(gè)頁(yè)面的多個(gè)應(yīng)用中獨(dú)立使用 Vue 就會(huì)非常困難。

看下面這段代碼，我們?cè)?Vue 上先注冊(cè)了一個(gè)組件 el-counter，然后創(chuàng)建了兩個(gè) Vue 的實(shí)例。這兩個(gè)實(shí)例都自動(dòng)都擁有了 el-couter 這個(gè)組件，但這樣做很容易造成混淆。

Vue.component('el-counter',...)
new Vue({el:'#app1'})
new Vue({el:'#app2'})

為了解決這個(gè)問(wèn)題，Vue 3 引入一個(gè)新的 API ，createApp，來(lái)解決這個(gè)問(wèn)題，也就是新增了 App 的概念。全局的組件、插件都獨(dú)立地注冊(cè)在這個(gè) App 內(nèi)部，很好的解決了上面提到的兩個(gè)實(shí)例容易造成混淆的問(wèn)題。下面的代碼是使用 createApp 的簡(jiǎn)單示例：

const { createApp } = Vue
const app = createApp({})
app.component(...)
app.use(...)
app.mount('#app1')
const app2 = createApp({})
app2.mount('#app2')

createApp 還移除了很多我們常見(jiàn)的寫(xiě)法，比如在 createApp 中，就不再支持 filter、 o n 、 on、 on、off、 s e t 、 set、 set、delete 等 API。不過(guò)這都不用擔(dān)心，后面我會(huì)告訴你怎么去實(shí)現(xiàn)類(lèi)似這些 API 的功能。

在 Vue 3 中，v-model 的用法也有更改。在后面講到組件化，也就是我們需要深度使用 v-model 的時(shí)候，我會(huì)再細(xì)講。 其實(shí) Vue 3 還有很多小細(xì)節(jié)的更新，比如 slot 和 slot-scope 兩者實(shí)現(xiàn)了合并，而 directive 注冊(cè)指令的 API 等也有變化。

Vue 3 生態(tài)現(xiàn)狀介紹

在 Vue 生態(tài)中，現(xiàn)在所有官方庫(kù)的工具都全面支持 Vue 3 了，但仍然有一些生態(tài)庫(kù)還處于候選或者剛發(fā)布的狀態(tài)。所以，升級(jí) Vue 3 的過(guò)程中，除了 Vue 3 本身的語(yǔ)法變化，生態(tài)也要注意選擇。有一些周邊的生態(tài)庫(kù)可能還存在不穩(wěn)定的情況，開(kāi)發(fā)項(xiàng)目的時(shí)候我們時(shí)刻關(guān)注項(xiàng)目的 GitHub 即可。

Vue-cli4 已經(jīng)提供內(nèi)置選項(xiàng)，你當(dāng)然可以選擇它支持的 Vue 2。如果你對(duì) Vite 不放心的話(huà)，Vue-cli4 也全面支持 Vue 3，這還是很貼心的。

vue-router 是復(fù)雜項(xiàng)目必不可少的路由庫(kù)，它也包含一些寫(xiě)法上的變化，比如從 new Router 變成 createRouter；使用方式上，也全面擁抱 Composition API 風(fēng)格，提供了 useRouter 和 useRoute 等方法。

Vuex 4.0 也支持 Vue 3，不過(guò)變化不大。有趣的是 Vue 官方成員還發(fā)布了一個(gè) Pinia，Pania 的 API 非常接近 Vuex5 的設(shè)計(jì)，并且對(duì) Composition API 特別友好，更優(yōu)雅一些。在課程后續(xù)的項(xiàng)目里，我們會(huì)使用更成熟的 Vuex4。

其他生態(tài)諸如 Nuxt、組件庫(kù) Ant-design-vue、Element 等等，都有 Vue 3 的版本發(fā)布。我開(kāi)發(fā)維護(hù)的 Element3 是一個(gè)教育項(xiàng)目，我們?cè)诮M件化章節(jié)會(huì)詳細(xì)介紹。除此之外，我們項(xiàng)目中也會(huì)使用 Elemen3 來(lái)作為組件庫(kù)。并且在進(jìn)階開(kāi)發(fā)篇，我們會(huì)自己設(shè)計(jì)一個(gè)類(lèi)似風(fēng)格的組件庫(kù)。

使用自動(dòng)化升級(jí)工具進(jìn)行 Vue 的升級(jí)

小項(xiàng)目不用多說(shuō)，從 Vue 2 升級(jí)到 Vue 3 之后，對(duì)于語(yǔ)法的改變之處，我們挨個(gè)替換寫(xiě)法就可以。但對(duì)于復(fù)雜項(xiàng)目，我們需要借助幾個(gè)自動(dòng)化工具來(lái)幫我們過(guò)渡。

首先是在 Vue 3 的項(xiàng)目里，有一個(gè) @vue/compat 的庫(kù)，這是一個(gè) Vue 3 的構(gòu)建版本，提供了兼容 Vue 2 的行為。這個(gè)版本默認(rèn)運(yùn)行在 Vue 2 下，它的大部分 API 和 Vue 2 保持了一致。當(dāng)使用那些在 Vue 3 中發(fā)生變化或者廢棄的特性時(shí)，這個(gè)版本會(huì)提出警告，從而避免兼容性問(wèn)題的發(fā)生，幫助你很好地遷移項(xiàng)目。并且通過(guò)升級(jí)的提示信息，@vue/compat 還可以很好地幫助你學(xué)習(xí)版本之間的差異。

在下面的代碼中，首先我們把項(xiàng)目依賴(lài)的 Vue 版本換成 Vue 3，并且引入了 @vue/compat

"dependencies": {
-  "vue": "^2.6.12",
+  "vue": "^3.2.19",
+  "@vue/compat": "^3.2.19"
   ...
},
"devDependencies": {
-  "vue-template-compiler": "^2.6.12"
+  "@vue/compiler-sfc": "^3.2.19"
}

然后給 vue 設(shè)置別名 @vue/compat，也就是以 compat 作為入口，代碼如下：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('vue', '@vue/compat')
    ......
  }
}

這時(shí)你就會(huì)在控制臺(tái)看到很多警告，以及很多優(yōu)化的建議。我們參照建議，挨個(gè)去做優(yōu)化就可以了。

在 @vue/compat 提供了很多建議后，我們自己還是要慢慢做修改。但從另一個(gè)角度看，“偷懶”是優(yōu)秀程序員的標(biāo)志，社區(qū)就有能夠做自動(dòng)化替換的工具，比較好用的就是“阿里媽媽”出品的 gogocode，官方文檔也寫(xiě)得很詳細(xì)，就不在這里贅述了。

自動(dòng)化替換工具的原理很簡(jiǎn)單，和 Vue 的 Compiler 優(yōu)化的原理是一樣的，也就是利用編譯原理做代碼替換。如下圖所示，我們利用 babel 分析左邊 Vue 2 的源碼，解析成 AST，然后根據(jù) Vue 3 的寫(xiě)法對(duì) AST 進(jìn)行轉(zhuǎn)換，最后生成新的 Vue 3 代碼。

對(duì)于替換過(guò)程的中間編譯成的 AST，你可以理解為用 JavaScript 的對(duì)象去描述這段代碼，這和虛擬 DOM 的理念有一些相似，我們基于這個(gè)對(duì)象去做優(yōu)化，最終映射生成新的 Vue 3 代碼。

總結(jié)

到此這篇關(guān)于Vue2項(xiàng)目升級(jí)到Vue3的文章就介紹到這了,更多相關(guān)Vue2項(xiàng)目升級(jí)到Vue3內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！