vue3版本已經(jīng)上線兩年時(shí)間了绰垂，最近稍微空閑，考慮把公司vue2項(xiàng)目升級(jí)到vue3
為什么要升級(jí)vue3
1. 增加了代碼的可維護(hù)性
Vue2 使用的是 options 的API 濒析，代碼邏輯比較分散，可讀性差，可維護(hù)性差酗昼。Vue3 使用的是 compositionAPI 邏輯分明傻昙，可維護(hù)性高闺骚，更友好的支持TS。在 template 模板中支持多個(gè)根節(jié)點(diǎn)妆档，支持jsx語(yǔ)法僻爽。
2. 提升了頁(yè)面渲染性能
Vue3 在更新DOM算法上，做了優(yōu)化贾惦。在 Vue2 中,每次更新diff胸梆，都是全量對(duì)比敦捧，Vue3則只對(duì)比帶有標(biāo)記的，這樣大大減少了非動(dòng)態(tài)內(nèi)容的對(duì)比消耗碰镜。
3. 加強(qiáng)了 MVVM 雙向數(shù)據(jù)綁定的效率
Vue2 的雙向數(shù)據(jù)綁定是利用 ES5 的 Object.definePropert() 對(duì)對(duì)象屬性進(jìn)行劫持兢卵，結(jié)合 發(fā)布訂閱模式的方式來(lái)實(shí)現(xiàn)的。Vue3 中使用了 es6 的 ProxyAPI 對(duì)數(shù)據(jù)代理绪颖。
相比于vue2.x秽荤，使用proxy的優(yōu)勢(shì)如下：
1.defineProperty只能監(jiān)聽(tīng)某個(gè)屬性，不能對(duì)全對(duì)象監(jiān)聽(tīng)
2.可以省去for in柠横、閉包等內(nèi)容來(lái)提升效率（直接綁定整個(gè)對(duì)象即可）
3.可以監(jiān)聽(tīng)數(shù)組窃款，不用再去單獨(dú)的對(duì)數(shù)組做特異性操作 vue3.x 可以檢測(cè)到數(shù)組內(nèi)部數(shù)據(jù)的變化
升級(jí)存在的隱患
新的響應(yīng)式系統(tǒng)用了 Proxy，會(huì)存在兼容性問(wèn)題（不支持IE）牍氛。
框架底層進(jìn)行了大量重構(gòu)晨继，新增和刪除了很多原來(lái)的API，代碼結(jié)構(gòu)也發(fā)生了變化搬俊。很多地方需要進(jìn)行破壞性修改紊扬，從而容易導(dǎo)致各種問(wèn)題的出現(xiàn)。
項(xiàng)目使用到的第三方插件和 UI框架（Element）也需要替換和更改成 對(duì)應(yīng)Vue3可用版本悠抹。
升級(jí)方式
插件+手動(dòng)升級(jí)
插件地址
https://gogocode.io/zh/docs/vue/vue2-to-vue3
全局安裝最新的 gogocode-cli
npm install gogocode-cli -g
格式化源代碼珠月，方便對(duì)比代碼更改
因?yàn)榇a經(jīng)過(guò)工具的 AST 修改后可能會(huì)發(fā)生格式的變化，所以建議預(yù)先把所有的源碼用 prettier 格式化一遍楔敌，再和轉(zhuǎn)換后的作對(duì)比就一目了然了啤挎。
gogocode -s ./src -t gogocode-plugin-prettier -o ./src
遷移源文件
在終端（terminal）中跳轉(zhuǎn)到需要升級(jí)的Vue項(xiàng)目路徑。如果需要升級(jí)src路徑下的vue代碼卵凑，執(zhí)行如下命令：
注意：-s 后面是原文件的目錄/文件名庆聘，-o 后面是輸出的目錄/文件名，如果兩者相同勺卢，轉(zhuǎn)換插件會(huì)覆蓋你的代碼伙判，在此操作前請(qǐng)做好備份。
gogocode -s ./src -t gogocode-plugin-vue -o ./src
使用工具把代碼從 ElementUI 轉(zhuǎn)換成 Element Plus
gogocode -s ./src -t gogocode-plugin-element -o ./src
依賴升級(jí)
除了升級(jí)源碼黑忱，我們還需要升級(jí) Vue3 相關(guān)依賴宴抚，這一點(diǎn)也可以自動(dòng)完成，在終端（terminal）中跳轉(zhuǎn)到需要升級(jí)的Vue項(xiàng)目路徑甫煞，執(zhí)行如下命令：
gogocode -s package.json -t gogocode-plugin-vue -o package.json
運(yùn)行之后菇曲，你會(huì)發(fā)現(xiàn)，一堆報(bào)錯(cuò)抚吠，恭喜你常潮，開(kāi)始爬坑之旅
可以看一下 https://github.com/gogocodeio/vue-element-admin/commit/2f17bf01d2f020e0f1b9f0929cfb7acdc05fe97f#diff-802e2d5752f16b6edcd7d3611f3f22ae3f645492428157b4213ef5bd86f4665d
