# Изменено поведение при приведении значения атрибутов
кардинальное изменение

Информация

Это изменение низкоуровневого внутреннего API не затрагивает большинство разработчиков.

# Обзор

Краткий обзор изменений:

  • Отказ от внутреннего концепта перечисляемых атрибутов и обработка таких атрибутов также, как и обычных не-булевых атрибутов.
  • КАРДИНАЛЬНОЕ ИЗМЕНЕНИЕ: Больше не удаляется атрибут, если его значение false. Вместо этого будет устанавливаться attr="false". Для удаления атрибута необходимо использовать null или undefined.

Для получения дополнительной информации, читайте дальше!

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

В 2.x было несколько стратегий для приведения значений v-bind:

В следующей таблице описывается каким образом Vue по-разному приводил «перечисляемые атрибуты» в сравнении с обычными не-булевыми атрибутами:

Выражение foo обычный draggable перечисляемый
:attr="null" - draggable="false"
:attr="undefined" - -
:attr="true" foo="true" draggable="true"
:attr="false" - draggable="false"
:attr="0" foo="0" draggable="true"
attr="" foo="" draggable="true"
attr="foo" foo="foo" draggable="true"
attr foo="" draggable="true"

Как можно увидеть из таблицы, текущая реализация приводит true к 'true', но удаляет атрибут при значении false. Это также приводит к несогласованности и требовало от пользователей вручную приводить булевые значения к строке в распространённых случаях использования, например aria-* атрибутов, таких как aria-selected, aria-hidden, и т.д.

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

От внутреннего концепта «перечисляемых атрибутов» было решено отказаться и обрабатывать их как обычные не-булевы HTML-атрибуты.

  • Это решает проблемы несоответствия между обычными не-булевыми атрибутами и «перечисляемыми атрибутами»
  • Это также позволяет использовать значения, отличные от 'true' и 'false', или даже ключевых слов, которые могут быть в будущем, для таких атрибутов, как contenteditable

Для не-булевых атрибутов Vue перестанет удалять их, если значение false и вместо этого станет приводить их к 'false'.

  • Это решает проблему несоответствия между true и false и облегчает работу с атрибутами aria-*

Следующая таблица описывает новое поведение:

Выражение foo обычный draggable перечисляемый
:attr="null" - - *
:attr="undefined" - -
:attr="true" foo="true" draggable="true"
:attr="false" foo="false" * draggable="false"
:attr="0" foo="0" draggable="0" *
attr="" foo="" draggable="" *
attr="foo" foo="foo" draggable="foo" *
attr foo="" draggable="" *

*: поведение изменилось

Приведение для булевых атрибутов осталось без изменений.

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

# Перечисляемые атрибуты

Отсутствие перечисляемого атрибута и attr="false" может привести к разным значениям атрибутов IDL (которые будут отражать действительное состояние), описанным ниже:

Отсутствие перечисляемого атрибута IDL атрибут & значение
contenteditable contentEditable'inherit'
draggable draggablefalse
spellcheck spellchecktrue

Чтобы сохранить старое поведение, так как будут приводиться значения false к 'false', во Vue 3.x разработчикам необходимо доработать привязки v-bind таким образом, чтобы разрешались значением false или 'false' для contenteditable и spellcheck.

Во Vue 2.x, для перечисляемых атрибутов недействительные значения приводились к 'true'. Обычно такое поведение не требовалось и вряд ли на него можно было рассчитывать в больших масштабах. Во Vue 3.x true или 'true' должны быть явно определены.

# Приведение false к 'false' вместо удаления атрибута

Во Vue 3.x, null или undefined должны явно использоваться для удаления атрибута.

# Сравнение поведения в 2.x и в 3.x

Атрибут v-bind значение 2.x v-bind значение 3.x HTML результат
2.x «Перечисляемые атрибуты»
напр., contenteditable, draggable и spellcheck.
undefined, false undefined, null удалён
true, 'true', '', 1, 'foo' true, 'true' "true"
null, 'false' false, 'false' "false"
Остальные не-булевы атрибуты
напр., aria-checked, tabindex, alt, и т.д.
undefined, null, false undefined, null удалён
'false' false, 'false' "false"

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

  • ATTR_FALSE_VALUE
  • ATTR_ENUMERATED_COERCION