# 属性強制の振る舞い
breaking

Info

これはローレベルな内部 API の変更であり、ほとんどの開発者には影響しません。

# 概要

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

  • 列挙された属性の内部概念を削除し、それらの属性を通常の非ブール属性と同じように扱う。
  • 破壊的変更: 値がブール値 false の場合に属性を削除しないようになりました。代わりに attr="false" として設定されます。属性を削除するには、nullundefined を使ってください。

詳しくは、以下をお読みください!

# 2.x での構文

2.x では、v-bind の値を強制するために以下のような戦略がありました:

次の表では、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-selectedaria-hidden といった aria-* 属性のような非常に一般的なユースケースでも、ユーザーが手動でブール値を文字列に強制する必要があるなど、一貫性に欠けていました。

# 3.x での構文

この「列挙された属性」という内部概念を捨てて、通常の非ブール HTML 属性として扱うつもりです。

  • これは、通常の非ブール属性と「列挙された属性」の間の矛盾を解決します。
  • また、'true''false' 以外の値や、contenteditable のような属性には、これから定義されるキーワードを使用することも可能になります。

非ブール属性については、Vue は false であれば削除はせず、代わりに 'false' に強制します。

  • これにより、truefalse の間の矛盾が解消され、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 draggablefalse
spellcheck spellchecktrue

3.x では「列挙されたプロパティ」のために null'false' に強制しなくなったため、contenteditablespellcheck のような場合、2.x と同じ振る舞いを維持するために、開発者は null に解決していた v-bind 式を false に解決するか、'false' に変更する必要があります。

2.x では、列挙された属性に対して無効な値を 'true' に強制的に設定していました。これは通常意図していなかったもので、大規模に利用される可能性は低いと思われます。3.x では、true または 'true' を明示的に指定する必要があります。

# 属性を削除する代わりに false'false' に強制する

3.x では、明示的に属性を削除するには null または undefined を使用しなければなりません。

# 2.x と 3.x 間の振る舞いの比較

属性 v-bind2.x v-bind3.x HTML 出力
2.x “列挙された属性”
つまりcontenteditabledraggablespellcheck
undefined undefined, null 削除されます
true, 'true', '', 1, 'foo' true, 'true' "true"
null, false, 'false' false, 'false' "false"
その他の非ブール属性
例えば aria-checkedtabindexaltなど
undefined, null, false undefined, null 削除されます
'false' false, 'false' "false"

移行ビルドのフラグ:

  • ATTR_FALSE_VALUE
  • ATTR_ENUMERATED_COERCION