阿里发布新工具，直接帮你改代码！网友：工作量又减轻了～
时间：2022-12-10 23:00:03
来自掘金，作者:阿里妈妈前端快爆
链接：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
npminstallgogocode-cli-g 复制代码在终端（terminal）跳转到需要升级的地方 Vue 项目路径。如需升级。 src 路径下的 Vue 执行下列命令的代码
gogocode-s./src-tgogocode-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
--- EOF ----End-
最近有一些小伙伴，让我帮忙找一些 面试题 资料，于是我翻遍了收藏的 5T 资料后，汇总整理出来，可以说是程序员面试必备！所有资料都整理到网盘了，欢迎下载！点击👆卡片，关注后回复【面试题】即可获取
