# 属性強制の振舞い
breaking
Info
これはローレベルな内部 API の変更であり、ほとんどの開発者には影響しません。
# 概要
以下に変更点の概要を示します:
- 列挙された属性の内部概念を削除し、それらの属性を通常の非ブール属性と同じように扱う。
- 破壊的変更: 値がブール値
false
の場合に属性を削除しないようになりました。代わりに attr="false" として設定されます。属性を削除するには、null
かundefined
を使ってください。
詳しくは、以下をお読みください!
# 2.x での構文
2.x では、v-bind
の値を強制するために以下のような戦略がありました:
いくつかの属性/要素のペアでは、Vue は常に対応する IDL 属性(プロパティ)を使用します。:
<input>
、<select>
、<progress>
におけるvalue
など (opens new window)「ブール属性 (opens new window)」とxlinks (opens new window)については、Vue はそれらが"falsy"(
undefined
、null
、false
(opens new window))の場合には削除し、それ以外の場合には追加します (ここ (opens new window)やこちら (opens new window)を見てください)。「列挙された属性 (opens new window)」(現在は
contenteditable
、draggable
、spellcheck
)については、Vue はそれらを強制的に (opens new window)文字列にしようとします (vuejs/vue#9397 (opens new window)を修正するために、contenteditable
については今のところ特別な扱いをしています)。他の属性については、"falsy"な値(
undefined
,null
, orfalse
)は削除し、他の値はそのまま設定します(こちら (opens new window)を見てください)。
次の表では、Vue が「列挙された属性」を通常の非ブール属性とは異なる方法で強制する方法を説明しています:
バインディング式 | 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" |
上の表からわかるように、現在の実装ではtrue
を'true'
に強制していますが、false
の場合は属性を削除しています。これはまた、aria-selected
やaria-hidden
といったaria-*
属性のような非常に一般的なユースケースでも、ユーザーが手動でブール値を文字列に強制する必要があるなど、一貫性に欠けていました。
# 3.x での構文
この「列挙された属性」という内部概念を捨てて、通常の非ブール HTML 属性として扱うつもりです。
- これは、通常の非ブール属性と「列挙された属性」の間の矛盾を解決します。
- また、
'true'
や'false'
以外の値や、contenteditable
のような属性には、これから定義されるキーワードを使用することも可能になります。
非ブール属性については、Vue はfalse
であれば削除はせず、代わりに'false'
に強制します。
- これにより、
true
とfalse
の間の矛盾が解消され、aria-*
属性の出力が容易になります。
新しい振舞いについては、以下の表を参照してください:
バインディング式 | 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="" † |
†: 変更点
ブール属性への強制はそのままです。
# 移行の戦略
# 列挙された属性
列挙された属性が存在しない場合やattr="false"
が存在しない場合に、以下のように異なる IDL 属性値(実際の状態を反映した値)が生成されることがあります:
列挙された属性の不在 | IDL 属性と値 |
---|---|
contenteditable | contentEditable → 'inherit' |
draggable | draggable → false |
spellcheck | spellcheck → true |
これまでの振舞いを維持するために、また、false
を'false'
に強制するために、3.x Vue の開発者はcontenteditable
とspellcheck
に対してv-bind
式をfalse
または'false'
に解決する必要があります。
2.x では、列挙された属性に対して無効な値を'true'
に強制的に設定していました。これは通常意図していなかったもので、大規模に利用される可能性は低いと思われます。3.x では、true
または'true'
を明示的に指定する必要があります。
# 属性を削除する代わりに false
を 'false'
に強制する
3.x では、明示的に属性を削除するには null
または undefined
を使用しなければなりません。
# 2.x と 3.x 間の振舞いの比較
属性 | v-bind 値 2.x | v-bind 値 3.x | HTML 出力 |
---|---|---|---|
2.x “列挙された属性” つまり contenteditable 、draggable 、spellcheck | undefined , false | undefined , null | 削除されます |
true , 'true' , '' , 1 ,
'foo' | true , 'true' | "true" | |
null , 'false' | false , 'false' | "false" | |
その他の非ブール属性 例えば aria-checked 、tabindex 、alt など | undefined , null , false | undefined , null | 削除されます |
'false' | false , 'false' | "false" |