炫意html5
最早CSS3和HTML5移动技术网站之一

[Vue 3] 迁移指南 – attribute 强制行为

# attribute 强制行为


非兼容

信息

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

# 概览

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

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

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

# 2.x 语法

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

  • 对于某些 attribute/元素对,Vue 始终使用相应的 IDL attribute(property):比如 value<input><select><progress>,等等。

  • 对于“布尔 attribute”和 xlinks,如果它们是 falsy 的,Vue 会移除它们 (undefinednull or false) 另外加上它们 (见这里和这里)。

  • 对于“枚举 attribute” (目前 contenteditabledraggablespellcheck),Vue 会尝试强制将它们串起来 (目前对 contenteditable 做了特殊处理,修复 vuejs/vue#9397)。

  • 对于其他 attribute,我们移除了 falsy 值 (undefinednull,or false) 并按原样设置其他值 (见这里)。

下表描述了 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

为了保持原有的行为,并且我们将强制使用 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"

炫意HTML5 » [Vue 3] 迁移指南 – attribute 强制行为

Java基础教程Android基础教程