Поведение при слиянии v-bind

breaking

Обзор

• КАРДИНАЛЬНОЕ ИЗМЕНЕНИЕ: Порядок для привязок v-bind повлияет на результат отрисовки.

Введение

При динамической привязке атрибутов к элементу наиболее распространённым сценарием будет использование как синтаксиса v-bind="object", так и отдельных свойств на этом же элементе. Однако, это поднимает вопросы относительно приоритета при слиянии свойств.

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

В версии 2.x если на элементе есть и v-bind="object", и указано отдельно аналогичное свойство, то индивидуальное свойство будет всегда перезаписывать привязку из object.

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

Что изменилось в 3.x

В версии 3.x если на элементе есть и 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 указывается перед индивидуальными свойствами.