Vue.js

# Удалена поддержка модификаторов keyCode
кардинальное изменение

# Обзор

Вот краткое описание изменений:

  • КАРДИНАЛЬНОЕ ИЗМЕНЕНИЕ: Использование чисел, т.е. keyCode, в качестве модификаторов v-on больше не поддерживается
  • КАРДИНАЛЬНОЕ ИЗМЕНЕНИЕ: опция config.keyCodes больше не поддерживается

# Синтаксис в 2.x

Во Vue 2 можно было указывать keyCode для модификации метода v-on.

<!-- версия с keyCode -->
<input @keyup.13="submit" />

<!-- версия с псевдонимом -->
<input @keyup.enter="submit" />
1
2
3
4
5

Кроме того, можно было определять собственные псевдонимы через глобальную опцию config.keyCodes.

Vue.config.keyCodes = {
  f1: 112
}
1
2
3
<!-- версия с keyCode -->
<input @keyup.112="showHelpText" />

<!-- версия с пользовательским псевдонимом -->
<input @keyup.f1="showHelpText" />
1
2
3
4
5

# Синтаксис в 3.x

Поскольку KeyboardEvent.keyCode объявлен устаревшим (opens new window), то и Vue 3 больше нет смысла продолжать его поддержку. Теперь рекомендуется указывать имя в kebab-case для любой клавиши, которую требуется использовать в качестве модификатора.

<!-- Vue 3 и модификатор клавиши -->
<input v-on:keyup.page-down="nextPage">

<!-- Совпадает с любым регистром клавиш q/Q -->
<input v-on:keypress.q="quit">
1
2
3
4
5

Из этого следует, что опция config.keyCodes теперь больше не нужна и также не будет поддерживаться.

# Стратегия миграции

При использовании keyCode в кодовой базе, рекомендуется преобразовать такие случаи на использование именованных эквивалентов в kebab-case.

Ключи некоторых знаков препинания можно использовать буквально. Например, для обработки запятой ,:

<input v-on:keypress.,="commaPress">
1

Однако, ограничения синтаксиса не позволяют использовать некоторые символы, такие как ", ', /, =, > и .. Поэтому для этих символов следует проверять event.key внутри обработчика события.

Флаги сборки для миграции:

  • CONFIG_KEY_CODES
  • V_ON_KEYCODE_MODIFIER

← Удалено свойство $listeners →