如何一键将 Vue2 代码转成 Vue3 代码

喜欢ヅ旅行 2022-10-04 15:49 429阅读 0赞

![c680ea03c95be04c2806c5978142ce05.png][]

**作者：阿里妈妈前端快爆 https://juejin.cn/post/6977259197566517284**

Vue3 已经出来有一段时间了，很多朋友早已熟读了文档，写了好几个 Demo，馋 Composition API 等新特性已久了。无奈，在实际工作中，大部分朋友还是不得不守着成千上万行的 Vue2 老项目过日子，做一次框架升级就像给老房子装修——念头总是充沛，决心总是匮乏。

其实 Vue 团队已经尽可能地减少了破坏性更新，还提供了一份细致的迁移指南\[1\]，条数不少，但定睛一看，大部分都是体力活，有些很简单，比如异步组件要多包上一层：

![b20f10bb2491768476bacfbc8f1019b4.png][]还有一些就改起来有点麻烦，比如自定义指令生命周期的更名，和传入参数的一些细微变化：

![387f5eabfdd67ece47caa7a1953d5b39.png][] image.png

看到这种变化后，作为厌恶重复的程序员，已经开始盘算着能不能写个代码帮我们把这些规则批量给改好了，当然，写转换代码的代码要比写网页难上不少，还好我们之前已经有了一个趁手的工具：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\]）

![f15baf45e0a6c70593c3a396cca2386c.png][] image.png ![5753df1e136a17cec58c4380ce452e0d.png][] image.png

这里只是简单地介绍，完整的方案请参考：文档\[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\]

## 附录：当前转换规则覆盖 ##

<table> 
 <thead> 
 <tr> 
 <th>规则</th> 
 <th>转换支持</th> 
 <th>文档</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>v-for 中的 Ref 数组</td> 
 <td>✔</td> 
 <td>链接[13]</td> 
 </tr> 
 <tr> 
 <td>异步组件</td> 
 <td>✔</td> 
 <td>链接[14]</td> 
 </tr> 
 <tr> 
 <td>attribute 强制行为</td> 
 <td>✔</td> 
 <td>链接[15]</td> 
 </tr> 
 <tr> 
 <td>$attrs包含class&amp;style</td> 
 <td>✔</td> 
 <td>链接[16]</td> 
 </tr> 
 <tr> 
 <td>$children</td> 
 <td>✖️</td> 
 <td>链接[17]</td> 
 </tr> 
 <tr> 
 <td>自定义指令</td> 
 <td>✔</td> 
 <td>链接[18]</td> 
 </tr> 
 <tr> 
 <td>自定义元素交互</td> 
 <td>无需转换</td> 
 <td>链接[19]</td> 
 </tr> 
 <tr> 
 <td>Data 选项</td> 
 <td>✔</td> 
 <td>链接[20]</td> 
 </tr> 
 <tr> 
 <td>emits选项</td> 
 <td>✔</td> 
 <td>链接[21]</td> 
 </tr> 
 <tr> 
 <td>事件 API</td> 
 <td>✔</td> 
 <td>链接[22]</td> 
 </tr> 
 <tr> 
 <td>过滤器</td> 
 <td>✔</td> 
 <td>链接[23]</td> 
 </tr> 
 <tr> 
 <td>片段</td> 
 <td>✔</td> 
 <td>链接[24]</td> 
 </tr> 
 <tr> 
 <td>函数式组件</td> 
 <td>✔</td> 
 <td>链接[25]</td> 
 </tr> 
 <tr> 
 <td>全局 API</td> 
 <td>✔</td> 
 <td>链接[26]</td> 
 </tr> 
 <tr> 
 <td>全局 API Treeshaking</td> 
 <td>✔</td> 
 <td>链接[27]</td> 
 </tr> 
 <tr> 
 <td>内联模板 Attribute</td> 
 <td>✖️</td> 
 <td>链接[28]</td> 
 </tr> 
 <tr> 
 <td>keyattribute</td> 
 <td>✔</td> 
 <td>链接[29]</td> 
 </tr> 
 <tr> 
 <td>按键修饰符</td> 
 <td>✔</td> 
 <td>链接[30]</td> 
 </tr> 
 <tr> 
 <td>移除 $listeners</td> 
 <td>✔</td> 
 <td>链接[31]</td> 
 </tr> 
 <tr> 
 <td>挂载API变化</td> 
 <td>✔</td> 
 <td>链接[32]</td> 
 </tr> 
 <tr> 
 <td>propsData</td> 
 <td>开发中</td> 
 <td>链接[33]</td> 
 </tr> 
 <tr> 
 <td>在 prop 的默认函数中访问this</td> 
 <td>无需转换</td> 
 <td>链接[34]</td> 
 </tr> 
 <tr> 
 <td>渲染函数 API</td> 
 <td>✔</td> 
 <td>链接[35]</td> 
 </tr> 
 <tr> 
 <td>插槽统一</td> 
 <td>✔</td> 
 <td>链接[36]</td> 
 </tr> 
 <tr> 
 <td>Suspense</td> 
 <td>无需转换</td> 
 <td>链接[37]</td> 
 </tr> 
 <tr> 
 <td>过渡的 class 名更改</td> 
 <td>✔</td> 
 <td>链接[38]</td> 
 </tr> 
 <tr> 
 <td>Transition 作为 Root</td> 
 <td>开发中</td> 
 <td>链接[39]</td> 
 </tr> 
 <tr> 
 <td>Transition Group 根元素</td> 
 <td>✔</td> 
 <td>链接[40]</td> 
 </tr> 
 <tr> 
 <td>移除v-on.native修饰符</td> 
 <td>✔</td> 
 <td>链接[41]</td> 
 </tr> 
 <tr> 
 <td>v-model</td> 
 <td>✔</td> 
 <td>链接[42]</td> 
 </tr> 
 <tr> 
 <td>v-if 与 v-for 的优先级对比</td> 
 <td>✔</td> 
 <td>链接[43]</td> 
 </tr> 
 <tr> 
 <td>v-bind 合并行为</td> 
 <td>✔</td> 
 <td>链接[44]</td> 
 </tr> 
 <tr> 
 <td>VNode 生命周期事件</td> 
 <td>开发中</td> 
 <td>链接[45]</td> 
 </tr> 
 <tr> 
 <td>Watch on Arrays</td> 
 <td>✔</td> 
 <td>链接[46]</td> 
 </tr> 
 <tr> 
 <td>vuex</td> 
 <td>✔</td> 
 <td>链接[47]</td> 
 </tr> 
 <tr> 
 <td>vue-router</td> 
 <td>✔</td> 
 <td>链接[48]</td> 
 </tr> 
 </tbody> 
</table>

### 参考资料 ###

\[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

[c680ea03c95be04c2806c5978142ce05.png]: /images/20221004/09f3f9adf33c469094e01e3c938aa842.png
[b20f10bb2491768476bacfbc8f1019b4.png]: /images/20221004/1827ff2365514cc688b3de8430dddc05.png
[387f5eabfdd67ece47caa7a1953d5b39.png]: /images/20221004/a49ae15ea73d45338f3baa16c50ed915.png
[f15baf45e0a6c70593c3a396cca2386c.png]: https://img-blog.csdnimg.cn/img_convert/f15baf45e0a6c70593c3a396cca2386c.png
[5753df1e136a17cec58c4380ce452e0d.png]: /images/20221004/a2048ba3e30f434b975527675f3e5a72.png