Vue 3.0 v-bind合并行為

#概覽

• 不兼容：v-bind 的綁定順序會影響渲染結果。

#介紹

在元素上動態(tài)綁定 attribute 時，常見的場景是在一個元素中同時使用 v-bind="object" 語法和單獨的 property。然而，這就引出了關于合并的優(yōu)先級的問題。

#2.x 語法

在 2.x，如果一個元素同時定義了 v-bind="object" 和一個相同的單獨的 property，那么這個單獨的 property 總是會覆蓋 object 中的綁定。

<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- result -->
<div id="red"></div>

#3.x 語法

在 3.x，如果一個元素同時定義了 v-bind="object" 和一個相同的單獨的 property，那么聲明綁定的順序決定了它們?nèi)绾魏喜ⅰQ句話說，相對于假設開發(fā)者總是希望單獨的 property 覆蓋 object 中定義的內(nèi)容，現(xiàn)在開發(fā)者對自己所希望的合并行為有了更好的控制。

<!-- 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 的覆蓋功能，目前的建議是確保在單獨的 property 之前定義 v-bind attribute。