# 属性強制の振る舞い
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" |