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

breaking

Информация

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

Обзор

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

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

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

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

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

• Для некоторых пар атрибут/элемент Vue всегда использовал соответствующий IDL атрибут (свойство): например value для <input>, <select>, <progress>, и т.д. (opens new window).

• Для «булевых атрибутов (opens new window)» и xlinks (opens new window) Vue удалял их, если они «ложны» (undefined, null или false (opens new window)) и добавлял их в обратном случае (см. здесь (opens new window) и здесь (opens new window)).

• Для «перечисляемых атрибутов (opens new window)» (в настоящий момент contenteditable, draggable и spellcheck), Vue пытался привести (opens new window) их к строке (со специальной обработкой для contenteditable, чтобы исправить vuejs/vue#9397 (opens new window)).

• Для других атрибутов, удалялись при «ложных» значениях (undefined, null или false) и устанавливали другие значения как есть (см. здесь (opens new window)).

В следующей таблице описывается каким образом 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	draggable → false
spellcheck	spellcheck → true

Чтобы сохранить старое поведение, так как будут приводиться значения 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"