Reactive Props Destructure: the default value is not render in page.

[L1nJIayu]

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqNU0tv1DAQ/iuWLwtSNz6U0zZdCqgHOJQKOOYSksnWi18aT9JFq/x3xs4+wkIRB0ueb17ffB7v5bsQiqEHuZJlbFAHEhGoD8LUbnNbSYqVXFdO2+CRxAdvg+jQW7EoVDJS6uKmcqWakjmUDQIbTE3AlhBlTnK1BS63ha5D+FlJoWbOdC/VKUteyanf0tah2EbvmN0+hVcHB5NaiYwkjDkku5JPRCGulGpax2ktGD1g4YCUC1bdcZjC3pG2sGy9vbsuros3qtWR5nAB0S6/o3+OgFykklezNorBAXCJ4FpAwP9te5E2b33h+qN96j5WbmRRKDbedXpzIUnDEmoD+DmQ9u53aWpj/POnjBH2cJqleYLmx1/wbdxNMz0iZGaz+anGDdDkvv/6ADu+n5zWt705PMMLzi8QvekTxynsfe9apj2Ly2w/5hfWbvMt3u8IXDwOlYhmNXJ8fo+0PS+NfqbLas9UPK7tvzceeZH5sOCRxD6vr7gVixa6ujeU7YUYGWJEO3hEH2K5TykiO9+uRCTkKRI0rl+9PlY8/5QjcP4tyWr1sH7gAjzJoe04ipuSl2WYAmb/ZPwFQaNFIw==

Steps to reproduce

Comp.vue

<script setup lang="ts">

const { name = 'default name' } = defineProps<{
  name?: string
}>()

console.log(`Name: ${ name };`)

</script>

<template>
  <div>Name: {{ name }} ;</div>
</template>

App.vue

 <Comp name="jeffrey" />
 <Comp />

the default value is not render in page, but console output the default value.

What is expected?

the page render:

Name: jeffrey;
Name: default name;

the console output:

Name: jeffrey;
Name: default name;

What is actually happening?

the page render:

Name: jeffrey;
Name: ;

the console output:

Name: jeffrey;
Name: default name;

System Info

No response

Any additional comments?

No response

[sxzz]

The reproduction you provided does not match your description.

[hichem-dahi]

You can fix this issue by using withDefaults
example

export interface Props {
  name?: string
}

const props = withDefaults(defineProps<Props>(), {
  name: 'default name',
})

Source

Note that if you destructure the props object, the destructured variables will lose reactivity. Link

[sxzz]

See vuejs/rfcs#502 and enable propsDestructure feature.