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

應(yīng)不應(yīng)該升級？這個問題不能一概而論。

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

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

而 Vue 3 的 Composition API 帶來的代碼組織方式更利于封裝代碼，維護起來也不會上下橫跳。

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

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

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

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

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

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

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

Vue 3 不兼容的那些寫法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

使用自動化升級工具進行 Vue 的升級

小項目不用多說，從 Vue 2 升級到 Vue 3 之后，對于語法的改變之處，我們挨個替換寫法就可以。但對于復(fù)雜項目，我們需要借助幾個自動化工具來幫我們過渡。

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

在下面的代碼中，首先我們把項目依賴的 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')
    ......
  }
}

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

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

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

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

總結(jié)

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

最新評論