Vue3出来有一段时间了。很多朋友已经看了文档，写了几个demo，对CompositionAPI等新特性已经馋了很久了。向上。无奈，在实际工作中，大部分朋友还是要忍受几千行老旧的Vue2项目。做框架升级就像翻新旧房子——想法总是丰富，但决心总是缺乏。事实上，Vue团队已经尽可能地减少了破坏性更新，并且还提供了详细的迁移指南。东西倒是不少，但仔细一看，大部分都是手工活，有的还很简单。例如，异步组件需要更多的包。上层：还有一些改起来有点麻烦，比如自定义指令生命周期的重命名，传入参数的一些细微变化：看到这个变化后，作为一个讨厌重复的程序员，有已经开始考虑能不能写个代码帮我们批量改这些规则。当然，写代码转换代码比写网页难多了。幸运的是，我们之前已经有了一个得心应手的工具：GoGoCode。我们在之前的文章《阿里妈妈出的新工具，给批量修改项目代码减轻了痛苦》中介绍过。作为一个更简单的AST处理工具，可以大大降低编写转换逻辑的难度。就是为这件事量身定做的！于是我们整理了迁移指南中提到的一些API变更，以及vue-router\vuex的升级，用GoGoCode写了近30个转换逻辑，涵盖了从Vue2到Vue3的绝大部分代码变更场景。本程序可以帮助您一键将Vue2代码转换为Vue3代码。在上面的两个Vue2和Vue3的对比中，右边的Vue3的代码是在左边的Vue2的原始代码的基础上直接用这个工具生成的。效果还不错^_^，一起来试试吧！尝试在终端（terminal）全局安装gogocode-clinpminstallgogocode-cli-g跳转到需要升级的vue项目路径。如果需要升级src路径下的Vue代码，执行如下命令gogocode-s./src-tgogocode-plugin-vue-o./src-out转换操作完成后，会得到新的Vue3代码写到src-out目录下，我们尝试了Vue2官方的示例工程vue-hackernews-2.0，发现在转换的基础上，只需要稍作改动，然后更改构建过程即可运行.部分转换后的Diff如下：（查看完整Diff）这里只是简单介绍一下，完整解决方案请参考：文档实现比想象中简单很多为了达到转换的目的，GoGoCode新增了对解析的支持.vue文件，我们可以轻松获取解析后的模板和脚本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附录：当前转换规则覆盖规则转换支持文档Refarrayinv-for?链接异步组件?链接属性强制行为?链接$attrs包含类&样式?链接$children??链接自定义指令?链接自定义元素交互无转换链接数据选项?链接发出选项?链接事件API?链接过滤器?链接片段?链接功能类型组件?链接到全局API?链接到全局APITreeshaking?链接到内联模板属性?链接到关键属性?链接到按钮修饰符?链接到删除$listeners?链接到挂载API更改?链接到propsData链接正在开发中在prop的默认函数中访问这个没有转换链接渲染函数API?链接插槽统一?链接悬念不需要转换链接过渡类名称更改?链接过渡作为根链接过渡组根元素在开发中?链接删除v-on。native修饰符?链接v-model?链接v-if和v-进行优先级比较?链接v-bind合并行为?链接VNode生命周期事件开发链接WatchonArrays?链接vuex?链接vue-router?链接
