Change the behavior of boolean casting for props

[rcjiang]

The current behavior does not comply with JavaScript， for example:
CompA.vue:

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

<template>
  <div>{{ props.foo }}</div>
</template>

CompB.vue:

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

const props = defineProps<{
  foo?: boolean
}>()
</script>

<template>
  <CompA v-bind="props" />
</template>

App.vue:

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

<template>
  <!-- show false -->
  <CompB />

  <!-- show false -->
  <CompB v-bind="{}" />

  <!-- show true -->
  <CompB v-bind="{ foo: undefined }" />
  <CompB :foo="undefined" />
</template>

What happend?
<CompB v-bind="{}" /> not equivalent to<CompB v-bind="{ foo: undefined }" />
<CompB /> not equivalent to<CompB :foo="undefined" />

If change the CompB props as follows (only given the deault value "undefined"), it‘s behavior will be changed.

const props = withDefaults(defineProps<{
  foo?: boolean
}>(), {
  foo: undefined
}

This is difficult to understand from a JavaScript perspective, but in vue it is not a bug:
Under the current rules, if an optional boolean type prop is not given a default value, then <Comp /> is equivalent to <Comp :foo="false" /> .

More importantly, this can seriously hinder to wrap a component. If an optional boolean type prop is added to the wraped component and its default value is true while maintaining forward compatibility, it will cause the behavior of the component which include it to change.
In fact, it is common for us to use third-party component libraries and re wrap them.

If change boolean casting to the follows，perhaps more reasonable:
<Comp foo /> is equivalent to <Comp :foo="true" />
<Comp /> do nothing, equivalent to <Comp :foo="undefined" /> , If the Comp has default value, naturally, the final value is the default value. If the component expects false and omit prop，the prop should be defined as optional and given a default value of false.

[Shyam-Chen]

Comply with HTML, not JavaScript.

CompB.vue:

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

const props = withDefaults(
  defineProps<{
    foo?: boolean;
  }>(),
  {
    foo: false,
  },
);
</script>

<template>
  <CompA v-bind="props" />
</template>

[rcjiang]

Mainly, this rule will hinder the wrap of third-party UI libraries.
I added content to better explain my intention and moved it to a new position.
vuejs/rfcs#660