怎样从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
• <template v-for> 和非 v-for 节点上的 key 用法已更改
• 在同一元素上使用 v-if 和 v-for 优先级已更改( v-if 优先级更高 v-for ）
• v-bind=“object” 现在排序敏感
• v-on:event.native 已删除修改器
• v-for 中的 ref 不再注册 `ref 数组

3. 组件

• 只有普通函数才能用于创建功能组件。
• functional attribute 在单个文件组件中 (SFC) 的 <template> 和 functional 组件选项将被丢弃。
• 现在需要使用异步组件。 defineAsyncComponent 方法来创建
• 组件事件现在需要位于中。 emits 在选项中声明

4.渲染函数

• 渲染函数 API 更改
• $scopedSlots property 已移除，所有插槽均通过 $slots 作为函数公开
• $listeners 移除或集成 $attrs
• $attrs 现在包含 class 和 style attribute

5.自定义元素

• 现在，自定义元素检测在模板编译时执行。
• 特殊的 is attribute 的使用严格限于保留的 <component> 标签中

6.其他细微变化

• destroyed 生命周期选项已重命名 unmounted
• beforeDestroy 生命周期选项已重命名 beforeUnmount
• default prop 工厂功能不再可访问 this 上下文
• 自定义说明 API 更改为与组件生命周期和 binding.expression 已移除
• data 选项应始终声明为函数
• 来自 mixin 的 data 选项现在为浅层合并
• Attribute 强制策略已更改
• 一些过渡性的 class 被重命名
• <TransitionGroup> 默认情况下不再呈现包元素
• 监听数组时，只有替换数组时才会触发回调。如果更改时需要触发，则必须指定 deep 选项
• 无特殊说明的标签 (v-if/else-if/else、v-for 或 v-slot) 的 <template> 现在被视为普通元素，并将呈现
• 原生的 <template> 元素，而不是呈现其内部内容。
• 已挂载的应用程序不会替换其已挂载的元素。
• 生命周期 hook: 更改事件前缀 vnode-

7.被移除的 API

• keyCode 作为 v-on 对修饰符的支持
• on、off 和 $once 实例方法
• 过滤器 (filter)
• 内联模板 attribute
• $children 实例 property
• propsData 选项
• $destroy 实例方法。用户不应再手动管理个人 Vue 组件的生命周期。
• 全局函数 set 和 delete 和实例方法 $set 和 $delete 。基于代理的更改检测不再需要它们
• Element 和 Element Plus 框架也被修改了，请您自己参考。 Element Plus 用于调整组件使用情况的文档。

参考文档

Vue2 大型项目升级 Vue3 详细的经验总结