# Поведение при слиянии v-bind
кардинальное изменение
# Обзор
- КАРДИНАЛЬНОЕ ИЗМЕНЕНИЕ: Порядок для привязок 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>
2
3
4
# Что изменилось в 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>
2
3
4
5
6
7
8
9
# Стратегия миграции
Если полагаетесь на эту функциональность переопределения для v-bind
, то в настоящее время рекомендуем убедиться, что атрибут v-bind
указывается перед индивидуальными атрибутами.