众所周知,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
指令必须写在最前面
这一条应该不会对行为产生任何影响。