v-bind 合并行为 重大变更
概述
- 重大变更: v-bind 绑定的顺序会影响渲染结果。
介绍
在动态绑定元素上的属性时，一个常见的情况是同时使用 v-bind="object" 语法和单个属性，但这会引发关于合并优先级的问题。
2.x 语法
在 2.x 中，如果一个元素同时具有 v-bind="object" 和一个相同的单个属性定义，则单个属性将始终覆盖 object 中的绑定。
html
<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- result -->
<div id="red"></div>3.x 语法
在 3x 中，如果一个元素同时具有 v-bind="object" 和一个相同的单个属性定义，则绑定声明的顺序决定了它们如何合并。换句话说，开发者现在可以更多地控制所需的合并行为，而不是假设开发者希望单个属性始终覆盖 object 中的定义。
html
<!-- 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>迁移策略
如果您依赖于 v-bind 的此覆盖功能，我们目前建议确保您的 v-bind 属性在单个属性之前定义。