Vue中不使用withDefaults时Props响应性丢失问题排查

你遇到的问题本质是响应式丢失，具体原因如下：

• defineProps返回的是一个响应式Proxy对象，直接解构该对象会把属性转换为普通的非响应式变量。
• 模板会优先访问组件原生的props对象属性，而非你解构出来的普通变量。所以当父组件没传variant时，模板拿到的是props上的undefined，而脚本里console.log的是解构时带默认值的普通变量，这就造成了两者的不一致。

Scenario 2能临时生效，是因为reassign是普通变量，模板访问的是它的初始化默认值，但这种写法有致命缺陷——如果父组件后续更新variant，reassign不会同步变化，完全丢失了响应性。

正确写法（兼顾响应性与简洁性） #

用toRefs把响应式props对象转成ref集合后再解构，这样每个属性都保持响应式，同时能设置解构默认值：

<script setup lang="ts">
import { toRefs } from 'vue'

const props = defineProps<{ variant?: Variant }>()
const { variant = 'error' } = toRefs(props)
</script>

模板中直接使用variant即可，Vue3会自动对ref做解包处理，既能保留响应性，默认值也能正常生效。

另一种可选写法（无需解构） #

如果不想引入toRefs，也可以直接在模板里用空值合并运算符设置默认值：

<script setup lang="ts">
const props = defineProps<{ variant?: Variant }>()
</script>

<template>
  <div :class="`component--${props.variant ?? 'error'}`"></div>
</template>

这种写法更直接，但如果variant在多处使用，重复写?? 'error'会比较繁琐。

内容的提问来源于stack exchange，提问作者Raphael Rlt