Поведінка приведення атрибутів

несумісно

Інформація

Це низькорівнева внутрішня зміна API, яка не впливає на більшість розробників.

Огляд

Ось короткий підсумок змін:

• Відмова від внутрішньої концепції перерахованих атрибутів і обробка цих атрибутів так само, як і звичайних не булевих атрибутів
• НЕСУМІСНО: більше не видаляється атрибут, якщо його значенням є логічне значення false. Замість цього він встановлюється як attr="false". Щоб видалити атрибут, використовуйте null або undefined.

Щоб дізнатися більше, читайте далі!

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

У версії 2.x, у нас були наступні стратегії для приведення значень v-bind:

• Для деяких пар атрибут/елемент Vue завжди використовує відповідний IDL атрибут (властивість): наприклад, value для <input>, <select>, <progress>, тощо.

• Для "булевих атрибутів" та xlinks, Vue видаляє їх, якщо вони "хибні" (undefined, null або false) і додає їх в інакшому випадку (дивіться тут і тут).

• Для "перерахованих атрибутів" (наразі contenteditable, draggable і spellcheck), Vue намагається привести їх до рядків (зі спеціальною обробкою для contenteditable наразі, щоб виправити vuejs/vue#9397).

• Для інших атрибутів ми видаляємо "хибні" значення (undefined, null, або false) і встановлюємо інші значення як є (дивіться тут).

У наведеній нижче таблиці описано, як 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

Оскільки ми більше не приводимо null до 'false' для “перерахованих властивостей” у 3.x, у випадку contenteditable і spellcheck, розробникам потрібно буде змінити ті вирази v-bind, які використовувалися для повернення null, на повернення false або 'false', щоб підтримувати таку саму поведінку, як 2.x.

У версії 2.x, недійсні значення було приведено до 'true' для перерахованих атрибутів. Зазвичай це було ненавмисно, і навряд чи можна було покладатися на це у великих масштабах. У 3.x true або 'true' має бути вказано явно.

Приведення false до 'false' замість видалення атрибута

У версії 3.x null або undefined слід використовувати для явного видалення атрибута.

Порівняння поведінки між 2.x і 3.x

Атрибут	v-bind значення 2.x	v-bind значення 3.x	HTML вивід
2.x “Перераховані атрибути” тобто contenteditable, draggable та spellcheck.	undefined	undefined, null	видалено
	true, 'true', '', 1, 'foo'	true, 'true'	"true"
	null, false, 'false'	false, 'false'	"false"
Інші не булеві атрибути наприклад aria-checked, tabindex, alt, тощо	undefined, null, false	undefined, null	видалено
	'false'	false, 'false'	"false"

Прапори збірки міграції:

• ATTR_FALSE_VALUE
• ATTR_ENUMERATED_COERCION