Vue 布尔型 Attribute 空字符串等效于真值

官网中有这样一段话

当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。

关于布尔型 attribute（如 disabled、readonly、checked 等）在 HTML 和 Vue 中的行为，确实有一些需要澄清的设计逻辑。

1. HTML 标准中的布尔型 Attribute

在原生 HTML 中，布尔型 attribute 的存在即代表 true，其值本身无关紧要。例如：

<button disabled>Button</button>        <!-- 等价于 disabled="disabled" -->
<input type="checkbox" checked>         <!-- 等价于 checked="checked" -->

即使你写成：

<button disabled="">Button</button>     <!-- 空字符串值 -->
<button disabled="false">Button</button> <!-- 字符串 "false" -->

浏览器仍然会将其视为 true，因为只要 attribute 存在，就是启用状态。
唯一移除布尔型 attribute 的方式是直接删除它。

2. Vue 的 v-bind 行为设计

Vue 的 v-bind 在处理布尔型 attribute 时，模拟了 HTML 的这种行为：

• 当绑定的值为 真值（true、非空字符串、对象、数组等）或空字符串时，Vue 会渲染该 attribute。
• 当值为 假值（false、null、undefined、0）时，Vue 会移除该 attribute。

为什么空字符串 ("") 也算作“真”？

这是为了兼容 HTML 的惯用写法。在原生 HTML 中，开发者可能会这样写：

<button :disabled="someCondition ? 'disabled' : ''">

如果 Vue 将空字符串视为假值，这种写法会失效（attribute 被移除）。因此，Vue 选择将空字符串视为“需要保留 attribute”的信号，从而保持与模板中硬编码 disabled="" 的一致性。

对比其他假值

• false、null、undefined：明确表示“不需要 attribute”，因此 Vue 会移除它。
• 0：虽然是数字，但在布尔上下文中属于假值，也会移除 attribute（但像 maxlength="0" 这样的非布尔 attribute 可能需要特殊处理）。

3. 设计背后的考量

1. 与 HTML 习惯一致
   开发者可能已经习惯在模板中写 disabled=""，Vue 的设计避免了意外行为。

2. 灵活性
   允许通过动态绑定（如 :disabled="someStringVar"）控制 attribute 的存在，而无需严格限制为布尔值。

3. 明确性
   如果希望移除 attribute，应显式使用 false、null 或 undefined，而不是依赖空字符串的隐式转换。

4. 如何避免混淆？

• 显式使用布尔值：
  推荐在脚本中使用明确的布尔值，提高可读性：

  <button :disabled="isButtonDisabled">Button</button>
  

  data() {
    return {
      isButtonDisabled: true // 或 false
    }
  }
  

• 需要移除 attribute 时：
  确保绑定值为 false 而非空字符串：

  <button :disabled="shouldDisable ? true : false">Button</button>
  <!-- 或更简洁的 -->
  <button :disabled="!!someCondition">Button</button>
  

总结

• 空字符串 ("") 被视为真值：这是为了兼容 HTML 中 disabled="" 的常见写法。
• 假值包括：false、null、undefined、0（以及 NaN 等）。
• 最佳实践：在脚本中显式使用布尔值，避免依赖空字符串的隐式行为。

这种设计虽然初看有些反直觉，但目的是为了与 HTML 的惯用模式保持一致，并提供更灵活的动态绑定。