# Поведение при слиянии 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>
1
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>
1
2
3
4
5
6
7
8
9

# Стратегия миграции

Если полагаетесь на эту функциональность переопределения для v-bind, то в настоящее время рекомендуем убедиться, что атрибут v-bind указывается перед индивидуальными атрибутами.

Флаг сборки для миграции: COMPILER_V_BIND_OBJECT_ORDER