>[success] # attribute 強制行為 ~~~ 1.刪除枚舉 attribute 的內部概念，并將這些 attribute 視為普通的非布爾 attribute 2.重大改變：如果值為布爾值，則不再刪除 attribute false。相反，它被設置為 attr='false'。 移除 attribute，使用 null 或者 undefined 注意下面關于屬性是通過 'v-bind' 綁定 ~~~ >[info] ## 理解 IDL 屬性與內容屬性、布爾值屬性與枚舉屬性 ~~~ 1.看過上面官方解析比較暈原因是沒有分清楚'IDL 屬性與內容屬性、布爾值屬性與枚舉屬性' ~~~ >[danger] ##### 布爾值屬性 ~~~ 1.常見的布爾屬性'required, readonly, disabled，checked',它們的特點： 1.1.在于是否聲明該屬性，聲明為true 未聲明為false 1.2.聲明的格式，其值必須是一個空字符串（即該屬性的值未分配），或者是一個大小寫無關的 ASCII 字符串，該字符串與屬性名嚴格相同，前后都沒有空格 2.通過下面例子可以知道布爾類型屬性是否生效不在于你后面賦值而是在于你是否聲明 ~~~ * 舉個例子: ~~~html <!-- 布爾類型 true --> <input type="text" required> <input type="text" required=false> <input type="text" required='false'> <input type="text" required=true> <input type="text" required='true'> <input type="text" required=required> <input type="text" required='zzzzz'> <!-- 布爾類型false --> <input type="text"> ~~~ >[danger] ##### 枚舉類型 ~~~ 1.可以理解成匹配的元素是是一個系列的例如'autocomplete' 它可以對應的值' username、email、country、tel、url ' 容易和枚舉搞混的'contenteditable ' 他的枚舉可以true 或者 false 2.下面代碼以'contenteditable ' 為例當空字符串也代表 'true'，而不分配值時，也與空字符串等價都是他枚舉 提供的true等同，但是當聲明的枚舉例如下面'abcdefg' 不存在或者該屬性沒定義都等同枚舉提供的false屬性效果 ~~~ ~~~html <!-- 枚舉 --> <!-- 枚舉生效 --> <div contenteditable>An editable item</div> <div contenteditable="">An editable item</div> <div contenteditable="true">An editable item</div> <div contenteditable=true>An editable item</div> <!-- 枚舉不生效 --> <div contenteditable="false">An editable item</div> <div contenteditable="abcdefg">An editable item</div> <div>An editable item</div> ~~~ >[danger] ##### 內容屬性IDL屬性 ~~~ 1.HTML 中，屬性還有 內容屬性 和 IDL屬性 說法。注意，這兩種屬性，并不是對標簽屬性的劃分。 他們只是屬性不同地方的不同描述和寫法而已。 2.內容屬性 接收的值都是字符串。編寫 HTML 時，直接寫在標簽中的就是內容屬性。此外，內容屬性還可以 通過 JS 的 setAttribute() 來設置。 <div contenteditable>An editable item</div> input.setAttribute('type', 'text'); input.getAttribute('type') 3.IDL屬性 是一個 JavaScript 屬性（property），是 DOM 提供給 JS 的真正屬性。通過 . 運算符來 設置，且只接收正確類型的值。如果接收值的類型不正確，會自動轉化成正確的類型。 input.type = 'password'; ~~~ >[danger] ##### 參考文章 [IDL 屬性與內容屬性、布爾值屬性與枚舉屬性傻傻分不清楚？](https://zhuanlan.zhihu.com/p/144954383) >[info] ## Vue2.x 對這三種屬性轉換 ~~~ 1.對于某些屬性/元素對，Vue 采用 IDL 屬性 形式處理：如 value of <input>, <select>, <progress>, etc . 2.對于 布爾值屬性 和 xlinks，Vue 通過判斷 是否是falsy(undefined、 null、false)值來決定添加或是刪除屬性。 3.對于 枚舉屬性 (目前 contenteditable，draggable 和 spellcheck)， Vue 強制轉化為字符串true 和false因為這 三個枚舉特殊他們枚舉只有true 或者 false 4.對于其他（普通非布爾）屬性，如果傳遞過來的值是 falsy 值則刪除，否則直接添加 簡單的來說首先明白falsy'https://developer.mozilla.org/zh-CN/docs/Glossary/Falsy',簡單的說除了枚舉類型中 'contenteditable，draggable 和 spellcheck' 這三個比較特殊當你用v-bind去綁定時候會根據你綁定的值幫你 轉換成他們枚舉提供的'true' 和'false' 其他的屬性通過v-bind 綁定只要是符合falsy 那三種情況就會直接移除 ~~~ >[danger] ##### 舉個例子 ~~~html <!-- 布爾類型false --> <input type="text" :required='false'> <input type="text" :required='null'> <input type="text" :required='undefined'> <!-- 枚舉 --> <input type="text" :autocomplete='false'> <input type="text" :autocomplete='null'> <input type="text" :autocomplete='undefined'> <!-- 特殊枚舉類型 --> <input type="text" :contenteditable='false'> <input type="text" :contenteditable='null'> <input type="text" :contenteditable='undefined'> ~~~  >[danger] ##### 官方給的對比圖 ~~~ 1.通過v-bind 綁定的屬性 就簡單分為兩種特殊枚舉屬性處理 和 其他屬性處理，表格一列是綁定 每種情況，二三列是他們對應渲染出來的效果 ~~~ | 綁定表達式 | `foo`正常 | `draggable`枚舉 | | --- | --- | --- | | `:attr="null"` | / | `draggable="false"` | | `:attr="undefined"` | / | / | | `:attr="true"` | `foo="true"` | `draggable="true"` | | `:attr="false"` | / | `draggable="false"` | | `:attr="0"` | `foo="0"` | `draggable="true"` | | `attr=""` | `foo=""` | `draggable="true"` | | `attr="foo"` | `foo="foo"` | `draggable="true"` | | `attr` | `foo=""` | `draggable="true"` | >[danger] ##### 源碼中對幾個類型值的分類  [對應源碼的位置](https://github1s.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js)  >[info] ## Vue3.x ~~~ 1.在2.x 問題就是不同屬性通過v-bind 綁定false 會有兩種結果，非特殊課枚舉屬性設置是false該元素直接被刪除， 但是特殊枚舉屬性會被強制設為字符串false,其中這么做還出現了一個弊端實驗屬性不能體驗可以看vue2.x 這個issues'https://github.com/vuejs/vue/issues/9397' 2.vue3.x 將屬性從'特殊枚舉屬性和其他屬性'分為了新的'布爾屬性和非布爾屬性'，特殊枚舉屬性 可以使用除 true 和 false 以外的值，甚至是未使用的關鍵字，并且'非布爾屬性'，如果傳遞的值是false，Vue 將不再會刪除 屬性了，而是強制轉化為字符串'false' 3.布爾屬性 表現并改變，和 Vue 2.x 保持一致。 ~~~ >[danger] ##### 舉個例子 ~~~ 1.還是一樣的例子注意現在只有布爾屬性在設置成false會被刪除，其他非布爾屬性只會轉譯成字符串false 但是null 和undefined 依舊無論什么屬性都會被刪除 ~~~ ~~~html <!-- 布爾類型false --> <input type="text" :required='false'> <input type="text" :required='null'> <input type="text" :required='undefined'> <!-- 枚舉 --> <input type="text" :autocomplete='false'> <input type="text" :autocomplete='null'> <input type="text" :autocomplete='undefined'> <!-- 特殊枚舉類型 --> <input type="text" :contenteditable='false'> <input type="text" :contenteditable='null'> <input type="text" :contenteditable='undefined'> ~~~  >[danger] ##### 官方給的對比圖 | 綁定表達式 | `foo`正常 | `draggable`枚舉 | | --- | --- | --- | | `:attr="null"` | / | /? | | `:attr="undefined"` | / | / | | `:attr="true"` | `foo="true"` | `draggable="true"` | | `:attr="false"` | `foo="false"`? | `draggable="false"` | | `:attr="0"` | `foo="0"` | `draggable="0"`? | | `attr=""` | `foo=""` | `draggable=""`? | | `attr="foo"` | `foo="foo"` | `draggable="foo"`? | | `attr` | `foo=""` | `draggable=""`? | >[danger] ##### vue3.x 我要怎么做 ~~~ 1.所以當你屬性是動態綁定值的時候并且想刪除不能再配置false，而是需要所使用undefined和null來顯式刪除屬性 ~~~ >[info] ## 官網給出的2.x 和3.x 對比圖 | Attributes | `v-bind`value2.x | `v-bind`value3.x | HTML 輸出 | | --- | --- | --- | --- | | 2.x “枚舉attribute” i.e.`contenteditable`,`draggable`and`spellcheck`. | `undefined`,`false` | `undefined`,`null` | *removed* | | `true`,`'true'`,`''`,`1`,`'foo'` | `true`,`'true'` | `"true"` | | `null`,`'false'` | `false`,`'false'` | `"false"` | | 其他非布爾attribute eg.`aria-checked`,`tabindex`,`alt`, etc. | `undefined`,`null`,`false` | `undefined`,`null` | *removed* | | `'false'` | `false`,`'false'` | `"false"` |