您的位置:58编程 > vue强制赋值 Vue 3.0 attribute强制行为

vue强制赋值 Vue 3.0 attribute强制行为

2023-04-16 14:33 VUE3教程

vue强制赋值 Vue 3.0 attribute强制行为

vue强制赋值 Vue 3.0 attribute强制行为

vue强制赋值

信息

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

#概览

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

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

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

#2.x 语法

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

  • 对于某些 attribute/元素对,Vue 始终使用相应的 IDL attribute(property):比如 value,``,等等。
  • 对于“布尔 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 draggable → false
spellcheck spellcheck → true

为了保持原有的行为,并且我们将强制使用 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. contenteditabledraggable and spellcheck. undefinedfalse undefinednull removed
true"true"""1"foo" true"true" "true"
null"false" false"false" "false"
其他非布尔attribute eg. aria-checkedtabindexalt, etc. undefinednullfalse undefinednull removed
"false" false"false" "false"
阅读全文
以上是58编程为你收集整理的vue强制赋值 Vue 3.0 attribute强制行为全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 58编程 58biancheng.com 版权所有 联系我们
桂ICP备12005667号-32 Powered by CMS