• 开始时间：2020-01-30
• 目标主要版本：3.x
• 引用 issue：#8731 #8735 #9397 #11053
• 实现的 PR：N/A

摘要

• 丢弃枚举属性的内部概念，将这些属性与普通的非布尔属性同等对待。
• 如果布尔值是 false，不再删除属性。相反，它被设置为 attr="false"。要删除属性，使用 null 或者 undefined。

基本范例

N/A

动机

在 2.x 中，我们有以下策略来强制执行 v-bind 的值：

• 对于一些属性/元素对，Vue 总是使用相应的 IDL 属性（property）：比如 、、 的 value，等等。对于 “布尔属性” 和 xlinks，如果它们是 “falsy”（undefined、null 或者 false），Vue 将会将其删除，否则会将其添加（参考这里和这里）。对于 “枚举属性” （目前是 contenteditable、dragable 和 spellcheck），Vue 尝试将其强制转为字符串（目前对 contenteditable 进行特殊处理，以修复 vuejs/vue#9397）。对于其他属性，我们删除 “falsy” 的值（undefined、null 或 false）并按照原样设置其他值（参考这里）。 在 2.x 中，我们将 “枚举属性” 的概念建模为它们只能接受 "true" 和 "false"，这在技术上是有缺陷的。这也使得它们的行为与其他非布尔属性不同，导致了混乱。下表描述了 Vue 如何将 “枚举属性” 与普通的非布尔属性区别对待： Binding expr. **foo** normal **draggable** enumerated :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"，但如果是 false，则会删除该属性。这也导致了不一致，并要求用户在非常常见的情况下手动将布尔值强制转换为字符串，如 aria-* 属性，如 aria-selected，aria-hidden 等。 具体设计 我们打算放弃这个 “枚举属性” 的内部概念，并将其视为正常的非布尔 HTML 属性。这就解决了正常的非布尔属性和 “枚举属性” 之间的不一致问题。它还可以使用 "true" 和 "false" 之外的值，甚至是尚未出现的关键字，来表示 contenteditable 这样的属性成为可能。对于非布尔属性，如果它们是 false 的，就不要再删除它们，而是将它们强制为 "false"。这解决了 true 和 false 之间的不一致，并使得输出 aria-* 属性变得更容易。 下表描述了新的行为： Binding expr. **foo** normal **draggable** enumerated :attr="null" / draggable="false" :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=""† †：表示变更布尔属性强制保持不变。 缺点该提案提出了以下破坏性变化： 对于 “枚举属性”： null 将删除该属性，而不是产生 "false"。除了 "true" 和 "false" 以外的数字和字符串将不再被强制为 "true"。（无论如何，旧的行为不应该起作用） 对于所有非布尔属性，false 值不会再被移除，而是被强制转为 "false"。 这里最主要的破坏是，用户应该停止依赖 false 值来删除属性，而是要求他们使用 null 或 undefined 来实现。由于布尔属性不受影响，这一变化主要影响到枚举属性，其中 "false" 值和没有属性会导致不同的元素状态，例如 aria-checked。它也可能影响 CSS 选择器，如 [foo]。 备选方案N/A 采纳策略在这种情况下，codemod 不太可能有帮助。我们将在我们的迁移指南中提供详细的信息，并在 3.x 文档中记录强制行为。 枚举属性没有枚举属性和 attr="false" 可能会产生不同的 IDL 属性值（这将反映实际状态），描述如下： Absent enumerated attr IDL attr & value contenteditable contentEditable → 'inherit' draggable draggable → false spellcheck spellcheck → true 为了保持旧的行为，并且由于我们将强制 false 变为 "false"，在 3.x 版本中，Vue 开发者需要使用 v-bind 表达式对 contenteditable 和 spellcheck 解析为 false 或 "false"。 在 2.x 中，无效的值被强制转换为枚举属性的 "true"。这通常是无意的，而且不太可能被大规模的依赖。在 3.x 中，true 或 "true" 应该被明确制定。 将 false 强制转换为 “false”，而不是删除属性在 3.x 中，应该使用 null 或 undefined 来明确删除一个属性。 2.x 和 3.x 行为的比较 Attribute **v-bind** value 2.x **v-bind** value 3.x HTML output 2.x “Enumerated attrs”i.e. contenteditable, draggable and spellcheck. undefined, false undefined, null removed true, 'true', '', 1, 'foo' true, 'true' "true" null, 'false' false, 'false' "false" Other non-boolean attrseg. aria-checked, tabindex, alt, etc. undefined, null, false undefined, null removed 'false' false, 'false' "false" 没有解决的问题N/A