1
前言
Vue3 已經出來有一段時間了，很多朋友早已熟讀了文檔，寫了好幾個 Demo，饞 Composition API 等新特性已久了。無奈，在實際工作中，大部分朋友還是不得不守着成千上萬行的 Vue2 老項目過日子，做一次架構更新就像給老房子裝修——念頭總是充沛，決心總是匮乏。
其實 Vue 團隊已經盡可能地減少了破壞性更新，還提供了一份細緻的遷移指南，條數不少，但定睛一看，大部分都是體力活，有些很簡單，比如異步元件要多包上一層：
還有一些就改起來有點麻煩，比如自定義指令生命周期的更名，和傳入參數的一些細微變化：
看到這種變化後，作為厭惡重複的程式員，已經開始盤算着能不能寫個代碼幫我們把這些規則批量給改好了，當然，寫轉換代碼的代碼要比寫網頁難上不少，還好我們之前已經有了一個趁手的工具：GoGoCode。
作為一個更簡單的 AST 處理工具，能大大減輕轉換邏輯的書寫難度，簡直就是為了這事兒量身打造的！另外，關注我們，公号終碼一生，背景回複“資料”，可擷取相關視訊教程和最新的面試資料。
于是我們梳理了遷移指南裡提到的，附帶上 vue-router \ vuex 更新的一些 API 變化，配合 GoGoCode 書寫了近 30 條轉換邏輯，涵蓋了 Vue2 到 Vue3 代碼 break change 的大部分場景，這個程式可以幫助你一鍵把 Vue2 的代碼轉換成 Vue3 的代碼。
上面提到的兩條 Vue2 到 Vue3 的差異對比中，右側 Vue3 的代碼就是通過這個工具根據左側 Vue2 代碼原片直出的，效果還不錯吧 ^_^，我們來一起試一下！
2
嘗試一下
全局安裝 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 試了一下，發現在轉換的基礎上隻要稍作改動再改一下建構流程就能跑起來了，一些轉換的 Diff 如下：
3
實作比預想的要簡單很多
為了達成轉換目的，GoGoCode 新增支援了對 .vue 檔案的解析，我們可以輕松地擷取到解析好的 template 和 scirpt AST 節點，并利用 GoGoCode 友善的 API 進行處理。另外，關注我們，公号終碼一生，背景回複“資料”，可擷取相關視訊教程和最新的面試資料。
一些簡單的規則，比如前面介紹的異步元件轉換直接進行類似字元串的替換即可，由于是基于 AST 的，是以無需關心代碼格式，工作量是很小的：
script
.replace('() => import($_$)', 'Vue.defineAsyncComponent(() => import($_$))')
.replace(
`
() => ({
component: import($_$1),
$$$
})`,
`
Vue.defineAsyncComponent({
loader: () => import($_$1),
$$$
})
`
); 這次項目也檢驗了 GoGoCode 對複雜情況的處理，就像前面提到的自定義指令生命周期的變化，也很輕松地做到！
4
開源位址
吃水不忘挖井人，希望這些工作能為 Vue 開源社群做些貢獻，讓社群盡快享受到 Vue3 帶來的技術紅利，也讓 Vue 團隊的成員能夠拜托 Vue2 的曆史包袱，更加聚焦于 Vue3 新特性的研發！項目伊始，存在的不足之處希望得到大家的回報和幫助：
| Github | https://github.com/thx/gogocode |