赛捷软件论坛's Archiver

vicky.yu 发表于 2023-12-4 10:32

Vue 3.0 attribute强制行为

信息

这是一个低级的内部 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 会移除它们 (undefined,null or false) 另外加上它们 (见这里和这里)。
对于“枚举 attribute” (目前 contenteditable,draggable 和 spellcheck),Vue 会尝试强制将它们串起来 (目前对 contenteditable 做了特殊处理,修复 vuejs/vue#9397)。
对于其他 attribute,我们移除了 falsy 值 (undefined,null,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-selected,aria-hidden,等等。

#3.x 语法

页: [1]

Powered by Discuz! Archiver 7.2  © 2001-2009 Comsenz Inc.