vue 中 boolean props 的默认值问题

场景

最近组内其他人基于 antdv 封装了一些组件，其中一些 boolean 类型的 props 被透传到了 antdv 的组件。但实际使用时发现，当不传递这些 boolean props 时，antdv 组件的行为和预期不一致。

问题

例如

组件 A

<script lang="ts" setup>
withDefaults(
  defineProps<{
    flag?: boolean
  }>(),
  {
    flag: true,
  },
)
</script>

<template>
  <div>
    {{ String($props.flag ?? 'undefined') }}
  </div>
</template>

组件 B

<script lang="ts" setup>
import A from './A.vue'

defineProps<{
  flag?: boolean
}>()
</script>

<template>
  <A v-bind="$props"></A>
</template>

测试使用

<script setup>
import A from './A.vue'
import B from './B.vue'
</script>

<template>
  <A></A>
  <B></B>
</template>

渲染结果

true
false

playground: https://play.vuejs.org/#eNqFUcFOwzAM/ZUoQtomjfbAbZRNLXCAAyDgmEtp3S4jTaIk3SZN/XecdOs2aRo9VLbfs/Pst6Op1tG6BTqjiS0M145YcK2eM8kbrYwjKamMasgoilNPHA1ANgBZAO6ZZDKJ+ynYj4mDRovcAWaEJOk8idM+zDDMMEzigUKn1NlCyYrX0coqiYp2nstooRrNBZh37biSltEZCYjHciHU5jXUnGlheqgXSyh+L9RXdutrjH4YsGDWwOiAudzU4Hr4+esNthgPYKPKViD7CvgJVonWa+xpWStLlH3CC2pfwvm4rL/t89aBtIelvFDP7AKfUTzq45XVj3LvorvQx2SHVwxunPgpclk/IB27//M2WFhCxSV8GKVtsn+sEnm9mJEfpQTkSOnm48lVr73bZH37w2WJT99oP4zRvf/npoeXr8s1TG64Wz5BlbfC2fG5QkQvaMSqVznFe50Q9kf24MT/jytgEgrHNfZtScnXQ+K/3Y58OYP+jfu9Ij+YLBZkhH4HZeVoQrpuGBAfJpwu3v0ByAcmXQ==

是不是感觉很神奇，组件 B 明明将所有的 props 都透传给了组件 A，但却渲染出来了不同的结果。在组件 B 中打印一下 props.flag 的值，发现是 false，这就是实际的问题了。

解决

好吧，目前的解决方法是将所有的 boolean 值的默认值都强制指定为 undefined，例如

<script lang="ts" setup>
withDefaults(
  defineProps<{
    flag?: boolean
  }>(),
  {
    flag: undefined,
  },
)
</script>

这样就可以得到预期的结果了。

true
true

参考

• 在 vue 的官方文档中找到了这个行为的定义，ref: Boolean 类型转换
• 检查了一下 vue issues，发现这是一个自 2017 年以来就不断有人提出的问题，看起来已经是一个历史遗留问题了，ref: https://github.com/vuejs/vue/issues/4792
• 有一个 pr 正在尝试改变这个行为，ref: https://github.com/vuejs/core/pull/8602 – 吾辈错了，它只是修复 withDefaults 显式指定 undefined 时 props 的类型问题，默认情况下还是不符合预期，yyx 回复说为了兼容无法改变，ref: https://github.com/vuejs/core/issues/8576#issuecomment-1630583143