# attribute 强制行为
非兼容

信息

这是一个低等级的内部 API 更改,不会影响大多数开发人员。

# 概览

下面是对这些变化的高层次总结:

  • 删除枚举 attribute 的内部概念,并将这些 attribute 视为普通的非布尔 attribute
  • 重大改变:如果值为布尔值,则不再删除 attribute false。相反,它被设置为 attr=“false”。移除 attribute,应该使用 null 或者 undefined

如需更深入的解释,请继续阅读!

# 2.x 语法

在 2.x,我们有以下策略来强制 v-bind 的值:

下表描述了 Vue 如何使用普通非布尔 attribute 强制“枚举 attribute”:

绑定表达式 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' 但如果 attribute 为 false,则移除该 attribute。这也导致了不一致性,并要求用户在非常常见的用例中手动强制布尔值为字符串,例如 aria-* attribute,例如 aria-selectedaria-hidden,等等。

# 3.x 语法

我们打算放弃“枚举型 attribute”的内部概念,并将它们视为普通的非布尔型 HTML attribute。

  • 这就解决了普通非布尔型 attribute 和“枚举型 attribute”之间的不一致性
  • 它还可以使用 'true''false' 以外的值,甚至可以使用 contenteditable 等 attribute 的关键字

对于非布尔型 attribute,如果 attribute 值为 false,Vue 将停止删除它们,相反强制它们的值为 'false'

  • 这就解决了 truefalse 之间的不一致性,并使输出 aria-* attributes 更容易

下表描述了新行为:

绑定表达式 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="" *

*:变更

布尔 attributes 的强制保持不变。

# 迁移策略

# 枚举 attribute

缺少值的枚举 attribute 和 attr="false" 可能会产生不同的 IDL attribute 值 (将反映实际状态),描述如下:

缺少枚举attr IDL attr & 值
contenteditable contentEditable'inherit'
draggable draggablefalse
spellcheck spellchecktrue

为了保持原有的行为,我们将强制使布尔型 Attribute 的 false 转换为 'false',在 3.x Vue 中,开发人员需要将 v-bind 表达式解析为 false'false',表示 contenteditablespellcheck

在 2.x 中,枚举 attribute 的无效值被强制为 'true'。这通常是无意的,不太可能大规模依赖。在 3.x 中,应显式指定 true'true'

#false 强制转换为 'false' 而不是删除 attribute

在 3.x,nullundefined 应用于显式删除 attribute。

# 2.x 和 3.x 行为的比较

Attributes v-bind value 2.x v-bind value 3.x HTML 输出
2.x “枚举attribute”
i.e. contenteditable, draggable and spellcheck.
undefined, false undefined, null removed
true, 'true', '', 1, 'foo' true, 'true' "true"
null, 'false' false, 'false' "false"
其他非布尔attribute
eg. aria-checked, tabindex, alt, etc.
undefined, null, false undefined, null removed
'false' false, 'false' "false"