众所周知,Vue 3 与 Vue 2 版本存在着一定程度的不兼容问题。对于那些历史负担较重的 Vue 2 项目,我们可以通过禁用和调整一部分 Vue 2 特性,使其更易于迁移至 Vue 3。
禁止使用 $children
通常来说,引用已渲染的子元素都是不必要的。大多数情况可以使用 $refs 代替;少数情况可以使用 $scopedSlots.default 来辅助渲染。
禁止使用 model 选项
对于可以控制外部使用的组件,建议不使用 model 来实现双向绑定语法糖,而是使用 .sync 修饰符;对于那些不容易修改引用的组件,可以将 model 的配置修改为:
model: {
prop: 'modelValue',
event: 'update:model-value',
}迁移策略
在此基础上,当需要迁移至 Vue 3 时,只需将 :prop.sync 统一修改为 v-model:prop 即可
禁止使用 $on、$off 和 $once,仅在 hook 事件中使用 $once
多数 $on 的用例都是事件总线,这些场景大多可以通过 provide/inject 或者是全局状态管理代替;少数情况诸如:
this.$once('hook:unmounted', () => {
clearTimeout(timer)
})则可以保留。
迁移策略
在此基础上,当需要迁移至 Vue 3 时,只需将 this.$once('hook:unmounted', fn) 修改为 setup 中的 onUnmounted 即可
禁止使用 filter
这是一个与 ECMA 标准不兼容的特性。将其修改为函数调用即可,对于全局 filter,可以将其挂载于 Vue 原型上,但不建议这么做。
禁止使用 functional component
一种用例是用于优化性能,实际上可以不考虑这部分性能差异;另一种是用于传递渲染上下文,这部分建议使用 $props,$attrs 和 $scopedSlots 代替;还有一种情况是用于在组件树中隐藏组件,不建议这样做,如果一定需要建议约定一个特殊的 ref 来实现类似效果。
禁止使用 inline-template 属性
一个被废弃的特性,多数情况可以用插槽代替。
禁止使用 v-on 的数字修饰符和 config.keyCodes
一个被废弃的 DOM 特性,完全可以使用字符串修饰符代替。
禁止在 props 的 default 函数内使用 this
一个非常容易产生错误的特性。对于需要综合处理属性的情况,建议使用 computed 包装一个独立的属性;极特殊场景建议用 watch 代替。
禁止使用 $slots 和 slot/slot-scope 属性
同样是一个被废弃的特性,完全可以使用 $scopedSlots 和 v-slot 代替。有时由于依赖库的实现问题可能无法替换,建议尽快寻找这些依赖库的替代品。
禁止将 transition 作为根元素
一个出于偶然的特性。只需要将 transition 调整至引用组件的位置即可。
v-bind 指令必须写在最前面
这一条应该不会对行为产生任何影响。