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

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

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

看到这种变化后，作为厌恶重复的程序员，已经开始盘算着能不能写个代码帮我们把这些规则批量给改好了，当然，写转换代码的代码要比写网页难上不少，还好我们之前已经有了一个趁手的工具：GoGoCode。 能大大减轻转换逻辑的书写难度，简直就是为了这事儿量身打造的！

尝试一下

全局安装 gogocode-cli

 npm install gogocode

在终端（terminal）中跳转到需要升级的 Vue 项目路径。

如果需要升级 src 路径下的 Vue 代码，执行如下命令

gogocode -s ./src -t gogocode-plugin-vue -o ./src-out

转换操作执行完毕后新的 Vue3 代码会被写入到 src-out 目录中

我们拿 Vue2 的官方示例项目 vue-hackernews-2.0 试了一下，发现在转换的基础上只要稍作改动再改一下构建流程就能跑起来了，一些转换的 Diff 如下：（查看完整 Diff）

这里只是简单地介绍，完整的方案请参考：文档

转换规则覆盖

规则	转换支持	文档
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	✔	链接

实现比预想的要简单很多

为了达成转换目的，GoGoCode 新增支持了对 .vue 文件的解析，我们可以轻松地获取到解析好的 template 和 scirpt AST节点，并利用 GoGoCode 方便的 API 进行处理。

一些简单的规则，比如前面介绍的异步组件转换直接进行类似字符串的替换即可，由于是基于 AST 的，所以无需关心代码格式，工作量是很小的这次项目也检验了 GoGoCode 对复杂情况的处理，就像前面提到的自定义指令生命周期的变化，也很轻松地做到！