[译] Vue 3 迁移策略 —— 按键修饰符(破坏性改动)

2,350 阅读1分钟

需要调研 vue 2 到 vue 3 的迁移方案,来做内部分享。

我看网上貌似目前只有一人翻译了,翻译了前几章。

但是我着急用,只能自己翻了。译者四级没过,全靠有道和谷歌了。

vue 3 官方文档原文—— keycode modifiers

概览

以下是更改内容的简单摘要:

  • Breaking:不再支持 v-on 修饰符,只可以使用数字,即按键码
  • Breaking:不在支持 config.keyCodes

2.x 语法

Vue 2 中,keyCodes 是修饰 v-on 方法的一种方式。

<!-- keyCode version -->
<input v-on:keyup.13="submit" />

<!-- alias version -->
<input v-on:keyup.enter="submit" />

另外,您可以通过全局 config.keyCodes 选项自定义别名。

Vue.config.keyCodes = {
  f1: 112
}
<!-- keyCode version -->
<input v-on:keyup.112="showHelpText" />

<!-- custom alias version -->
<input v-on:keyup.f1="showHelpText" />

3.x 语法

由于 KeyboardEvent.keyCode 已被弃用,因此 Vue 3 也不再继续支持它。也因此,现在建议用短横线命名法(kebab-case)命名所有作为修饰符的键。

<!-- Vue 3 Key Modifier on v-on -->
<input v-on:keyup.delete="confirmDelete" />

结果,这意味着 config.keyCodes 现在也已弃用,将不再支持。

迁移策略

对于在其代码库中使用 keyCode 的用户,建议转换为短横线命名法(kebab-case)命名的等效项。

译者注: 因为 KeyboardEvent.keyCode 已被弃用,所以 vue 3 中 ,是按 KeyboardEvent.key 的方式实现的,大概,我猜的。参考 Mdn Key Values