Поведінка злиття v-bind несумісно
Огляд
- НЕСУМІСНО: Порядок зв'язування для v-bind впливатиме на результат рендерингу.
Вступ
Під час динамічного прив'язування атрибутів до елемента типовий сценарій передбачає використання як синтаксису v-bind="object"
, так і окремих атрибутів у тому самому елементі. Однак, це викликає питання щодо пріоритетності об'єднання.
Синтаксис 2.x
У 2.x, якщо елемент має як v-bind="object"
, так і визначений ідентичний індивідуальний атрибут, індивідуальний атрибут завжди перезаписує прив'язки в object
.
<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- result -->
<div id="red"></div>
Синтаксис 3.x
У 3x, якщо елемент має як v-bind="object"
, так і визначений ідентичний індивідуальний атрибут, порядок оголошення прив'язок визначає спосіб їх об'єднання. Іншими словами, замість того, щоб припускати, що розробники хочуть, щоб індивідуальний атрибут завжди перевизначав те, що визначено в object
, розробники тепер мають більше контролю над бажаною поведінкою об'єднання.
<!-- шаблон -->
<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
визначено перед окремими атрибутами.