Vue3 已經出來有一段時間了，很多朋友早已熟讀了文檔，寫了好幾個 Demo，饞 Composition API 等新特性已久了。無奈，在實際工作中，大部分朋友還是不得不守著成千上萬行的 Vue2 老項目過日子，做一次框架升級就像給老房子裝修——念頭總是充沛，決心總是匱乏。
其實 Vue 團隊已經盡可能地減少了破壞性更新，還提供了一份細致的遷移指南，條數不少，但定睛一看，大部分都是體力活，有些很簡單，比如異步組件要多包上一層：
還有一些就改起來有點麻煩，比如自定義指令生命周期的更名，和傳入參數的一些細微變化：
看到這種變化后，作為厭惡重復的程序員，已經開始盤算著能不能寫個代碼幫我們把這些規則批量給改好了，當然，寫轉換代碼的代碼要比寫網頁難上不少，還好我們之前已經有了一個趁手的工具： GoGoCode。
我們之前的文章《阿里媽媽出的新工具，給批量修改項目代碼減輕了痛苦》介紹過它，作為一個更簡單的 AST處理工具，能大大減輕轉換邏輯的書寫難度，簡直就是為了這事兒量身打造的！
于是我們梳理了遷移指南里提到的，附帶上 vue-router \ vuex 升級的一些 API 變化，配合 GoGoCode 書寫了近 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 試了一下，發現在轉換的基礎上只要稍作改動再改一下構建流程就能跑起來了，一些轉換的 Diff 如下：（查看完整 Diff）
這里只是簡單地介紹，完整的方案請參考：文檔
實現比預想的要簡單很多
為了達成轉換目的，GoGoCode 新增支持了對 .vue 文件的解析，我們可以輕松地獲取到解析好的 template 和 script 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: https://github.com/thx/gogocode/issues
釘釘群：34266233
最后：求 star 支持！
Github：github.com/thx/gogocod…（本項目在 packages/gogocode-plugin-vue/ 目錄下）
官網：gogocode.io
附錄：當前轉換規則覆蓋
| 規則 | 轉換支持 | 文檔 |
|---|---|---|
| v-for 中的 Ref 數組 | ? | 鏈接 |
| 異步組件 | ? | 鏈接 |
| attribute 強制行為 | ? | 鏈接 |
| $attrs包含class&style | ? | 鏈接 |
| $children | ?? | 鏈接 |
| 自定義指令 | ? | 鏈接 |
| 自定義元素交互 | 無需轉換 | 鏈接 |
| Data 選項 | ? | 鏈接 |
| emits選項 | ? | 鏈接 |
| 事件 API | ? | 鏈接 |
| 過濾器 | ? | 鏈接 |
| 片段 | ? | 鏈接 |
| 函數式組件 | ? | 鏈接 |
| 全局 API | ? | 鏈接 |
| 全局 API Treeshaking | ? | 鏈接 |
| 內聯模板 Attribute | ?? | 鏈接 |
| keyattribute | ? | 鏈接 |
| 按鍵修飾符 | ? | 鏈接 |
| 移除$listeners | ? | 鏈接 |
| 掛載API變化 | ? | 鏈接 |
| propsData | 開發中 | 鏈接 |
| 在 prop 的默認函數中訪問this | 無需轉換 | 鏈接 |
| 渲染函數 API | ? | 鏈接 |
| 插槽統一 | ? | 鏈接 |
| Suspense | 無需轉換 | 鏈接 |
| 過渡的 class 名更改 | ? | 鏈接 |
| Transition 作為 Root | 開發中 | 鏈接 |
| Transition Group 根元素 | ? | 鏈接 |
| 移除v-on.native修飾符 | ? | 鏈接 |
| v-model | ? | 鏈接 |
| v-if 與 v-for 的優先級對比 | ? | 鏈接 |
| v-bind 合并行為 | ? | 鏈接 |
| VNode 生命周期事件 | 開發中 | 鏈接 |
| Watch on Arrays | ? | 鏈接 |
| vuex | ? | 鏈接 |
| vue-router | ? | 鏈接 |
