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

Інформація

Це низькорівнева внутрішня зміна 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

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

Огляд #

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

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

Стратегія міграції #

Перераховані атрибути #

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

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