vue2升级vue3方案

   随着 vue3 的发布和越来越多项目的使用,之前使用 vue2 的项目也不能落下。虽然 vue3 具有一定的向下兼容性,但还是有一些破坏性的改动,并且 vue3 相较于 vue2 在运行效率和开发体验上有较好的提升。vue3 比较明显的一个变化就是添加了 setup(){} 函数,使得业务逻辑的复用性更强,代码组织更具有条理性。即使是这样,小改动还是很多的。

   在大佬们的指导下,整理了目前 vue2 升级为 vue3 的不兼容变更项。如有遗漏,望大家不吝指出。

vue2 升级 vue3

  • 升级前
    • 模版
    • 渲染函数
    • 其他改动
    • 移除 API
  • 升级中
    • 全局
    • 模版
    • 组件
    • 渲染函数
    • 生命周期
    • 其他
  • 升级后
  • 相关配套设施
    • elementUI
    • vuex
    • vue-router
      • 创建实例
      • 路由模式
      • 挂载根实例
      • 使用
      • break changes
  • 测试

升级前

在正式升级前,可以提前完成兼容性的改动。

模版

  1. 排查同时使用 v-ifv-for 的元素,避免在同一个元素上同时使用,可以通过 computed 方式过滤出可见元素的列表;
  2. 排查元素 v-bind 的前后使用,确保 v-bind 先定义,再定义各个属性;
  3. 排查 v-for 中使用 ref 的地方,将 ref 绑定为一个函数;

渲染函数

  1. 排查所有 this.$scopedSlots 更改为 this.$slots
  2. 全局搜索使用 slot-scope 的地方改为 v-slot ;

其他改动

  1. 排查所有的组件中的 data 类型,确保 data 必须是返回 objectfunction
  2. 排查所有使用 mixinextend 的组件,确保 data 中的属性不重复,或者都为顶级属性;
  3. 排查所有的 watch 的参数,如果监听参数为数组,需要设置 deep: true

移除 API

  1. 排查使用数字 (即键码) 作为 v-on 的修饰符,更改为别名的方式 参照。示例:
vue2
v-on:keyup.112

vue3
v-on:keyup.delete
  1. 移除 config.keyCodes
  2. 排查使用 keyCode ,建议转换为对应的 kebab-cased (短横线) 命名 参照;
  3. 全局搜索 filters ,更改为使用 computedfunction 代替 filters ;对于使用较多场景的 filters 可以考虑使用全局的 filters 示例:
// main.js
const app = createApp(App)

app.config.globalProperties.$filters = {
  currencyUSD(value) {
    return '$' + value
  }
}

// vue组件

  1. 全局搜索 inline-template ,移除 inline-template 标识,如果必须使用可用

你可能感兴趣的:(vue,vue.js)