VUE3 入门教程 Vue 3.0 attribute强制行为

2024-02-25 开发教程 VUE3 入门教程 匿名 6

信息

这是一个低级的内部 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"
attrfoo=""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"
attrfoo=""draggable=""

†: 变更

布尔 attributes 的强制保持不变。

#迁移策略

#枚举 attribute

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

缺少枚举attrIDL attr & 值
contenteditablecontentEditable'inherit'
draggabledraggablefalse
spellcheckspellchecktrue

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

Attributesv-bindvalue 2.xv-bindvalue 3.xHTML 输出
2.x “枚举attribute” i.e. contenteditable, draggableand spellcheck.undefined, falseundefined, nullremoved
true, 'true', '', 1, 'foo'true, 'true'"true"
null, 'false'false, 'false'"false"
其他非布尔attribute eg. aria-checked, tabindex, alt, etc.undefined, null, falseundefined, nullremoved
'false'false, 'false'"false"