javascript - ¿Por qué pasar una cadena vacía a las props booleanas de un componente Vue se considera verdadero?

Por favor, vea este ejemplo mínimo, tengo un componente simple como este

HelloWorld.vue

<template>
  <div v-if="show">I will show even if show prop is passed as empty string</div>
</template>

<script>
  export default {
    props: {
      show: Boolean,
    },
  };
</script>

Ahora, si hago esto a ese componente

App.vue

<template>
  <div>
    <HelloWorld :show="show" />
  </div>
</template>

<script>
  import HelloWorld from "./components/HelloWorld";

  export default {
    data() {
      return {
        show: "",
      };
    },
    components: {
      HelloWorld,
    },
  };
</script>

¡Eso generará esa cadena!

¿Por qué está pasando esto?

Una cadena vacía se considera falsa pero es verdadera en el componente de Vue, eso es bastante raro.

Probablemente entiendo por qué hace esto de esta manera porque ahora puedes hacer esto

<template>
  <div>
    <!-- you can just write show -->
    <HelloWorld show />
  </div>
</template>

Sin embargo, creo que el compilador de plantillas debería hacer esto porque mira JSX

Admite la abreviatura a nivel de compilador, así que me preguntaba por qué Vue está diseñado así.

Respuesta #1

Vuejs usa propiedades Booleanas como en HTML, donde una cadena vacía se considerará como verdadera

Lo escribieron en su documentación