>[success] # attribute 強制行為 ~~~ 1.在使用vue 時候經常使用'v-bind' 對標簽屬性進行動態綁定，vue2.x 時候將這些屬性按照分類分為三種 '布爾屬性'/'枚舉屬性'/'其他屬性'，在vue3.x 開始屬性種類只分為'布爾屬性'/'其他屬性' 2.枚舉屬性有'contenteditable,draggable,spellcheck' 布爾屬性有'allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,' + 'default,defaultchecked,defaultmuted,defaultselected,defer,disabled,' + 'enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,' + 'muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,' + 'required,reversed,scoped,seamless,selected,sortable,translate,' + 'truespeed,typemustmatch,visible' ~~~ >[info] ## 2.x 三種屬性規則 ~~~ 1.普通類型：'如果是（undefined，null，或 false）移除該屬性，其他則賦值是啥就是啥' 2.枚舉類型：'contenteditable,draggable,spellcheck' 這三類枚舉類型賦值為'undefined'則移除屬性，其他無論你賦值成什么值， 都會將值轉換成對應的布爾字符串，'contenteditable' 比較特殊因為他的枚舉類型不僅僅只包含 'true 和false'含'events,caret,typing,plaintext-only'，如果是這三個，值則不進行布爾字符串轉換 3.布爾類型：'如果是（undefined，null，或 false）移除該屬性,但如果其他屬性那則為對應本身' ~~~ * 官方給到圖 ~~~ 1.第一列是當使用綁定值時候，第二列是普通屬性渲染情況，第三列是枚舉類型渲染情況 ~~~ | 綁定表達式 | `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"` | >[info] ## Vue3.x 兩種屬性規則 ~~~ 1.其他屬性：現在的'枚舉屬性'已經和'其他屬性' 歸為一類，因為之前'contenteditable' 枚舉屬性在發展階段時候賦予了 除了'false/true' 其他值的概念，不如索性就將其歸類為其他屬性，當'undefined，null' 該屬性會被移除，其他賦值會一比一顯示 2.布爾屬性：'如果是（undefined，null，或 false，0，-0）移除該屬性,但如果其他屬性那則為對應本身' ~~~ * 官方解釋 ~~~ 1.現在可以發現 枚舉和其他屬性 他們的表現形式已經統一 ~~~ | 綁定表達式 | `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 百分百移除屬性 ~~~ 在 3.x 中，應該使用 null 或 undefined 以顯式移除 attribute。 ~~~ >[info] ## 官方文章解釋 [attribute 強制行為](https://v3.cn.vuejs.org/guide/migration/attribute-coercion.html#_3-x-%E8%AF%AD%E6%B3%95)