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，orfalse) 并按原样设置其他值 (见这里)。
下表描述了 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" |