Vue 3.0 v-bind合并行為

#概覽

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

#介紹

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

#2.x 語法

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

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

#3.x 語法

在 3.x，如果一個(gè)元素同時(shí)定義了 v-bind="object" 和一個(gè)相同的單獨(dú)的 property，那么聲明綁定的順序決定了它們?nèi)绾魏喜?。換句話說，相對于假設(shè)開發(fā)者總是希望單獨(dú)的 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 的覆蓋功能，目前的建議是確保在單獨(dú)的 property 之前定義 v-bind attribute。