信息
这是一个低级的内部 API 更改,不会影响大多数开发人员。
下面是对这些变化的高层次总结:
- 删除枚举 attribute 的内部概念,并将这些 attribute 视为普通的非布尔 attribute
- 重大改变:如果值为布尔值,则不再删除 attribute
false 。相反,它被设置为 attr=“false”。移除 attribute,使用 null 或者 undefined 。
如需更深入的解释,请继续阅读!
#2.x 语法
在 2.x,我们有以下策略来强制 v-bind 的值:
下表描述了 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" |
|
|
请发表评论