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>，等等 (opens new window)。

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

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

• 对于其他 attribute，我们移除了 falsy 值 (undefined，null，or false) 并按原样设置其他值 (见这里 (opens new window))。

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