创新互联VUE3教程：Vue3.0attribute强制行为

信息

大悟网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作，到程序开发，运营维护。创新互联公司2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

这是一个低级的内部 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 语法

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

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

对于非布尔 attribute，如果 attribute 为 false，Vue 将停止删除它们，相反强制它们为 'false'。

这解决了 true 和 false 之间的不一致性，并使输出 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'，表示 contenteditable 和 spellcheck。

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

#将 `false` 强制为 `'false'` 而不是删除 attribute

在 3.x，null 或 undefined 应用于显式删除 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"`

网站标题：创新互联VUE3教程：Vue3.0attribute强制行为
标题路径：http://www.shufengxianlan.com/qtweb/news25/179725.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容