在 Vue 2 项目中使用“严格模式”

[CyanSalt]

---

path: use-strict-mode-in-vue-2

---

众所周知，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 指令必须写在最前面

这一条应该不会对行为产生任何影响。