Skip to content

Поведінка злиття v-bind
несумісно

Огляд

  • НЕСУМІСНО: Порядок зв'язування для v-bind впливатиме на результат рендерингу.

Вступ

Під час динамічного прив'язування атрибутів до елемента типовий сценарій передбачає використання як синтаксису v-bind="object", так і окремих атрибутів у тому самому елементі. Однак, це викликає питання щодо пріоритетності об'єднання.

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

У 2.x, якщо елемент має як v-bind="object", так і визначений ідентичний індивідуальний атрибут, індивідуальний атрибут завжди перезаписує прив'язки в object.

html
<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- result -->
<div id="red"></div>

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

У 3x, якщо елемент має як v-bind="object", так і визначений ідентичний індивідуальний атрибут, порядок оголошення прив'язок визначає спосіб їх об'єднання. Іншими словами, замість того, щоб припускати, що розробники хочуть, щоб індивідуальний атрибут завжди перевизначав те, що визначено в object, розробники тепер мають більше контролю над бажаною поведінкою об'єднання.

html
<!-- шаблон -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- результат -->
<div id="blue"></div>

<!-- шаблон -->
<div v-bind="{ id: 'blue' }" id="red"></div>
<!-- результат -->
<div id="red"></div>

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

Якщо ви покладаєтеся на цю функцію заміни для v-bind, наразі ми рекомендуємо переконатися, що ваш атрибут v-bind визначено перед окремими атрибутами.

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