# v-bind Merge Behavior
breaking
# Overview
- BREAKING: Order of bindings for v-bind will affect the rendering result.
# Introduction
When dynamically binding attributes on an element, a common scenario involves using both the v-bind="object" syntax as well as individual properties in the same element. However, this raises questions as far as the priority of merging.
# 2.x Syntax
In 2.x, if an element has both v-bind="object" and an identical individual property defined, the individual property would always overwrite bindings in the object.
<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- result -->
<div id="red"></div>
2
3
4
# 3.x Syntax
In 3x, if an element has both v-bind="object" and an identical individual property defined, the order of how the bindings are declared determines how they are merged. In other words, rather than assuming developers want the individual property to always override what is defined in the object, developers now have more control over the desired merging behavior.
<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- result -->
<div id="blue"></div>
<!-- template -->
<div v-bind="{ id: 'blue' }" id="red"></div>
<!-- result -->
<div id="red"></div>
2
3
4
5
6
7
8
9
# Migration Strategy
If you are relying on this override functionality for v-bind, we currently recommend ensuring that your v-bind attribute is defined before individual properties.