# 属性強制の振る舞い

breaking

# 概要

以下に変更点の概要を示します:

• 列挙された属性の内部概念を削除し、それらの属性を通常の非ブール属性と同じように扱う。
• 破壊的変更: 値がブール値 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, or false)は削除し、他の値はそのまま設定します(こちら (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"

移行ビルドのフラグ:

• ATTR_FALSE_VALUE
• ATTR_ENUMERATED_COERSION