Vue2 项目升级 Vue3

vue3版本已经上线两年时间了，最近稍微空闲，考虑把公司vue2项目升级到vue3

为什么要升级vue3

1. 增加了代码的可维护性

Vue2 使用的是 options 的API ，代码逻辑比较分散，可读性差，可维护性差。Vue3 使用的是 compositionAPI 逻辑分明，可维护性高，更友好的支持TS。在 template 模板中支持多个根节点，支持jsx语法。

2. 提升了页面渲染性能

Vue3 在更新DOM算法上，做了优化。在 Vue2 中,每次更新diff，都是全量对比，Vue3则只对比带有标记的，这样大大减少了非动态内容的对比消耗。

3. 加强了 MVVM 双向数据绑定的效率

Vue2 的双向数据绑定是利用 ES5 的 Object.definePropert() 对对象属性进行劫持，结合 发布订阅模式的方式来实现的。Vue3 中使用了 es6 的 ProxyAPI 对数据代理。
相比于vue2.x，使用proxy的优势如下：

1.defineProperty只能监听某个属性，不能对全对象监听
2.可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
3.可以监听数组，不用再去单独的对数组做特异性操作 vue3.x 可以检测到数组内部数据的变化

升级存在的隐患

新的响应式系统用了 Proxy，会存在兼容性问题（不支持IE）。
框架底层进行了大量重构，新增和删除了很多原来的API，代码结构也发生了变化。很多地方需要进行破坏性修改，从而容易导致各种问题的出现。
项目使用到的第三方插件和 UI框架（Element）也需要替换和更改成 对应Vue3可用版本。

升级方式

插件+手动升级

插件地址
https://gogocode.io/zh/docs/vue/vue2-to-vue3
全局安装最新的 gogocode-cli
npm install gogocode-cli -g

格式化源代码，方便对比代码更改

因为代码经过工具的 AST 修改后可能会发生格式的变化，所以建议预先把所有的源码用 prettier 格式化一遍，再和转换后的作对比就一目了然了。

gogocode -s ./src -t gogocode-plugin-prettier  -o ./src

迁移源文件

在终端（terminal）中跳转到需要升级的Vue项目路径。如果需要升级src路径下的vue代码，执行如下命令：

注意：-s 后面是原文件的目录/文件名，-o 后面是输出的目录/文件名，如果两者相同，转换插件会覆盖你的代码，在此操作前请做好备份。

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

使用工具把代码从 ElementUI 转换成 Element Plus

gogocode -s ./src -t gogocode-plugin-element  -o ./src

依赖升级

除了升级源码，我们还需要升级 Vue3 相关依赖，这一点也可以自动完成，在终端（terminal）中跳转到需要升级的Vue项目路径，执行如下命令：

gogocode -s package.json -t gogocode-plugin-vue -o package.json

运行之后，你会发现，一堆报错，恭喜你，开始爬坑之旅
可以看一下 https://github.com/gogocodeio/vue-element-admin/commit/2f17bf01d2f020e0f1b9f0929cfb7acdc05fe97f#diff-802e2d5752f16b6edcd7d3611f3f22ae3f645492428157b4213ef5bd86f4665d