[[script setup]]の中で[[defineProps (Vue)|defineProps]]を[[分割代入 (JavaScript)|分割代入]]しても[[reactivity]]を保証する機能。[[props (Vue)|props]]のデフォルト値を設定するのに[[defineProps (Vue)|defineProps]]が不要になる。
[[Reactive Props Destructure (Vue)|Reactive Props Destructure]]に対応するまで、以下のコードは動かなかった。`count` が [[reactivity]]を喪失しているため。
```html
<script setup lang="ts">
import { computed } from "vue";
const { count } = defineProps<{
count: number;
}>();
const doubleCount = computed(() => count * 2);
</script>
<template>
<h1>{{ count }}</h1>
<h1>{{ doubleCount }}</h1>
</template>
```
この機能により、[[defineProps (Vue)|defineProps]]のデフォルト値が簡潔に表現できるようになった。
```ts
const { count = 10 } = defineProps<{
count?: number;
}>();
```
今までは以下のように書いていたので、[[プロパティ (JavaScript)|プロパティ]]が増えれば増えるほどシンプルになる。
```ts
const props = withDefaults(defineProps<{
count: number
}>(), {
count: 10,
});
```
## 参考
- [Announcing Vue 3.5 | The Vue Point](https://blog.vuejs.org/posts/vue-3-5#reactive-props-destructure)