Vue2升级到Vue3应该知道的事

隐患

• Vue3实现数据响应式的方式为Proxy，对IE11以下的版本存在兼容性问题
• 框架底层进行了大量重构，新增、废弃了很多API，需要对这些地方进行修改，以保证程序运转
• 依赖也需要升级，包括vue相关的插件和第三方插件

升级步骤

通过工具+手动

步骤一：

先把Vue2框架整体升级到Vue3，由于Vue3也兼容Option Api，因此代码结构可以暂时不用调整，之后再改为官方推荐的Composition Api

步骤二：

升级Vue相关的依赖，Vue/Vuex/Vue-router/Vue 编译工具

步骤三：

把 Vue3 中已经不再支持的 API 和语法进行修改替换。例如已不再支持的过滤器filter，v-model 用法也改变等。

步骤四：

将第三方组件库、插件等依赖升级到适配Vue3的版本

步骤五：

确保项目代码语法编译无误后，需要检查代码中的业务逻辑是否正确，以保证项目能完整运行。

步骤六：

使用 TypeScript 重构 JS 代码，TypeScript 比 JavaScript 多了静态类型检查，也增加了一些新的语法，是给项目锦上添花。但是这一步会比较耗时（因为相当于修改把JS代码都要过一遍），但是项目中可以同时存在JS 和 TS，所以可以逐步替换。

升级工具

通过开源工具gogocode 文档，可以进行上述步骤一二三的转换。

ps：对于工具改造代码，存在很多未知性，项目业务代码中有些比较复杂的（例如表单联动，规则校验等等）可能会对原来的逻辑有影响，需要逐一人工比对和测试。

升级需要的改变

1. 全局 API

• 全局 Vue API 已更改为使用应用程序实例
• 全局和内部 API 已经被重构为支持 tree-shake

2. 模板指令

• 组件上 v-model 用法已更改，以替换 v-bind.sync