Vue 3.0 attribute強(qiáng)制行為

信息

這是一個(gè)低級(jí)的內(nèi)部 API 更改，不會(huì)影響大多數(shù)開發(fā)人員。

#概覽

下面是對(duì)這些變化的高層次總結(jié)：

• 刪除枚舉 attribute 的內(nèi)部概念，并將這些 attribute 視為普通的非布爾 attribute
• 重大改變：如果值為布爾值，則不再刪除 attribute false。相反，它被設(shè)置為 attr=“false”。移除 attribute，使用 null 或者 undefined。

如需更深入的解釋，請(qǐng)繼續(xù)閱讀！

#2.x 語法

在 2.x，我們有以下策略來強(qiáng)制 v-bind 的值：

• 對(duì)于某些 attribute/元素對(duì)，Vue 始終使用相應(yīng)的 IDL attribute(property)：比如 value 的 ，，``，等等。
• 對(duì)于“布爾 attribute”和 xlinks，如果它們是 falsy 的，Vue 會(huì)移除它們 (undefined，null or false) 另外加上它們 (見這里和這里)。
• 對(duì)于“枚舉 attribute” (目前 contenteditable，draggable 和 spellcheck)，Vue 會(huì)嘗試強(qiáng)制將它們串起來 (目前對(duì) contenteditable 做了特殊處理，修復(fù) vuejs/vue#9397)。
• 對(duì)于其他 attribute，我們移除了 falsy 值 (undefined，null，or false) 并按原樣設(shè)置其他值 (見這里)。

下表描述了 Vue 如何使用普通非布爾 attribute 強(qiáng)制“枚舉 attribute”：

從上表可以看出，當(dāng)前實(shí)現(xiàn) true 強(qiáng)制為 'true' 但如果 attribute 為 false，則移除該 attribute。這也導(dǎo)致了不一致性，并要求用戶在非常常見的用例中手動(dòng)強(qiáng)制布爾值為字符串，例如 aria-* attribute 像 aria-selected，aria-hidden，等等。

#3.x 語法

我們打算放棄“枚舉 attribute”的內(nèi)部概念，并將它們視為普通的非布爾 HTML attribute。

• 這解決了普通非布爾 attribute 和“枚舉 attribute”之間的不一致性
• 它還可以使用 'true' 和 'false' 以外的值，甚至可以使用 contenteditable 等 attribute 的關(guān)鍵字`

對(duì)于非布爾 attribute，如果 attribute 為 false，Vue 將停止刪除它們，相反強(qiáng)制它們?yōu)?'false'。

• 這解決了 true 和 false 之間的不一致性，并使輸出 aria-* attributes 更容易

下表描述了新行為：

?： 變更

布爾 attributes 的強(qiáng)制保持不變。

#遷移策略

#枚舉 attribute

缺少枚舉 attribute 和 attr="false" 可能會(huì)產(chǎn)生不同的 IDL attribute 值 (將反映實(shí)際狀態(tài))，描述如下：

為了保持原有的行為，并且我們將強(qiáng)制使用 false 為 'false'，在 3.x Vue 中，開發(fā)人員需要將 v-bind 表達(dá)式解析為 false 或 'false'，表示 contenteditable 和 spellcheck。

在 2.x 中，枚舉 attribute 的無效值被強(qiáng)制為 'true'。這通常是無意的，不太可能大規(guī)模依賴。在 3.x 中，應(yīng)顯式指定 true 或 'true'。

#將 false 強(qiáng)制為 'false' 而不是刪除 attribute

在 3.x，null 或 undefined 應(yīng)用于顯式刪除 attribute。

#2.x 和 3.x 行為的比較