來自：掘金，作者：阿里媽媽前端快爆
連結：https://juejin.cn/post/6977259197566517284
Vue3 已經出來有一段時間了，很多朋友早已熟讀了文件，寫了好幾個 Demo，饞 Composition API 等新特性已久了。無奈，在實際工作中，大部分朋友還是不得不守著成千上萬行的 Vue2 老專案過日子，做一次框架升級就像給老房子裝修——念頭總是充沛，決心總是匱乏。
其實 Vue 團隊已經儘可能地減少了破壞性更新，還提供了一份細緻的遷移指南[1]，條數不少，但定睛一看，大部分都是體力活，有些很簡單，比如非同步元件要多包上一層：
還有一些就改起來有點麻煩，比如自定義指令生命週期的更名，和傳入引數的一些細微變化：
看到這種變化後，作為厭惡重複的程式設計師，已經開始盤算著能不能寫個程式碼幫我們把這些規則批次給改好了，當然，寫轉換程式碼的程式碼要比寫網頁難上不少，還好我們之前已經有了一個趁手的工具：GoGoCode[2]。
我們之前的文章《阿里媽媽出的新工具，給批次修改專案程式碼減輕了痛苦》[3]介紹過它，作為一個更簡單的 AST處理工具，能大大減輕轉換邏輯的書寫難度，簡直就是為了這事兒量身打造的！
於是我們梳理了遷移指南[4]裡提到的，附帶上 vue-router \ vuex 升級的一些 API 變化，配合 GoGoCode[5]書寫了近 30 條轉換邏輯，涵蓋了 Vue2 到 Vue3 程式碼 break change 的大部分場景，這個程式可以幫助你一鍵把 Vue2 的程式碼轉換成 Vue3 的程式碼。
上面提到的兩條 Vue2 到 Vue3 的差異對比中，右側 Vue3 的程式碼就是透過這個工具根據左側 Vue2 程式碼原片直出的，效果還不錯吧 ^_^，我們來一起試一下！
嘗試一下
全域性安裝 gogocode-cli
npm install gogocode-cli -g複製程式碼在終端（terminal）中跳轉到需要升級的 Vue 專案路徑。如果需要升級 src 路徑下的 Vue 程式碼，執行如下命令
gogocode -s ./src -t gogocode-plugin-vue -o ./src-out複製程式碼轉換操作執行完畢後新的 Vue3 程式碼會被寫入到 src-out 目錄中
我們拿 Vue2 的官方示例專案 vue-hackernews-2.0[6]試了一下，發現在轉換的基礎上只要稍作改動再改一下構建流程就能跑起來了，一些轉換的 Diff 如下：（檢視完整 Diff[7]）
這裡只是簡單地介紹，完整的方案請參考：文件[8]
實現比預想的要簡單很多
為了達成轉換目的，GoGoCode[9]新增支援了對 .vue 檔案的解析，我們可以輕鬆地獲取到解析好的 template 和 scirpt AST節點，並利用 GoGoCode 方便的 API 進行處理。
一些簡單的規則，比如前面介紹的非同步元件轉換直接進行類似字串的替換即可，由於是基於 AST 的，所以無需關心程式碼格式，工作量是很小的：
script.replace(' => import($_$)', 'Vue.defineAsyncComponent( => import($_$))').replace(` => ({component: import($_$1),$$$})`,`Vue.defineAsyncComponent({loader: => import($_$1),$$$})`);複製程式碼這次專案也檢驗了 GoGoCode 對複雜情況的處理，就像前面提到的自定義指令生命週期的變化，也很輕鬆地做到！
開源了，希望能得到大家的反饋
吃水不忘挖井人，希望這些工作能為 Vue 開源社群做些貢獻，讓社群儘快享受到Vue3帶來的技術紅利，也讓Vue團隊的成員能夠拜託 Vue2 的歷史包袱，更加聚焦於Vue3新特性的研發！專案伊始，存在的不足之處希望得到大家的反饋和幫助：
issues: github.com/thx/gogocod…[10]
釘釘群：34266233
最後：求 star 支援！
Github：github.com/thx/gogocod…[11]（本專案在 packages/gogocode-plugin-vue/ 目錄下）
官網：gogocode.io[12]
附錄：當前轉換規則覆蓋
| 規則 | 轉換支援 | 文件 |
|---|---|---|
| v-for 中的 Ref 陣列 | 連結[13] | |
| 非同步元件 | 連結[14] | |
| attribute 強制行為 | 連結[15] | |
| $attrs包含class&style | 連結[16] | |
| $children | ️ | 連結[17] |
| 自定義指令 | 連結[18] | |
| 自定義元素互動 | 無需轉換 | 連結[19] |
| Data 選項 | 連結[20] | |
| emits選項 | 連結[21] | |
| 事件 API | 連結[22] | |
| 過濾器 | 連結[23] | |
| 片段 | 連結[24] | |
| 函式式元件 | 連結[25] | |
| 全域性 API | 連結[26] | |
| 全域性 API Treeshaking | 連結[27] | |
| 內聯模板 Attribute | ️ | 連結[28] |
| keyattribute | 連結[29] | |
| 按鍵修飾符 | 連結[30] | |
| 移除 $listeners | 連結[31] | |
| 掛載API變化 | 連結[32] | |
| propsData | 開發中 | 連結[33] |
| 在 prop 的預設函式中訪問this | 無需轉換 | 連結[34] |
| 渲染函式 API | 連結[35] | |
| 插槽統一 | 連結[36] | |
| Suspense | 無需轉換 | 連結[37] |
| 過渡的 class 名更改 | 連結[38] | |
| Transition 作為 Root | 開發中 | 連結[39] |
| Transition Group 根元素 | 連結[40] | |
| 移除v-on.native修飾符 | 連結[41] | |
| v-model | 連結[42] | |
| v-if 與 v-for 的優先順序對比 | 連結[43] | |
| v-bind 合併行為 | 連結[44] | |
| VNode 生命週期事件 | 開發中 | 連結[45] |
| Watch on Arrays | 連結[46] | |
| vuex | 連結[47] | |
| vue-router | 連結[48] |
參考資料
[1]
遷移指南:https://v3.cn.vuejs.org/guide/migration/array-refs.html
[2]
GoGoCode:https://github.com/thx/gogocode
[3]
《阿里媽媽出的新工具，給批次修改專案程式碼減輕了痛苦》: https://juejin.cn/post/6938601548192677918
[4]
遷移指南:https://v3.cn.vuejs.org/guide/migration/array-refs.html
[5]
GoGoCode: https://github.com/thx/gogocode
[6]
vue-hackernews-2.0: https://github.com/vuejs/vue-hackernews-2.0
[7]
檢視完整 Diff: https://github.com/thx/gogocode/commit/6506a0e693aff1896da6c8863fa7e7c72d89610f?branch=6506a0e693aff1896da6c8863fa7e7c72d89610f&diff=split
[8]
文件: https://gogocode.io/zh/docs/specification/vue2-to-vue3
[9]
GoGoCode: https://github.com/thx/gogocode
[10]
github.com/thx/gogocod…: https://github.com/thx/gogocode/issues
[11]
github.com/thx/gogocod…: https://github.com/thx/gogocode
[12]
gogocode.io: https://gogocode.io
