Vue 3.5 起支持直接解构带默认值的 defineProps（如 const { prop = 'default' } = defineProps()），但该语法依赖编译器自动注入响应式代理；若未启用 Reactivity Transform 或使用不当，解构变量将丢失响应性，导致模板中显示 undefined。
vue 3.5 起支持直接解构带默认值的 `defineprops`（如 `const { prop = 'default' } = defineprops<...>()`），但该语法依赖编译器自动注入响应式代理；若未启用 reactivity transform 或使用不当，解构变量将丢失响应性，导致模板中显示 `undefined`。
在 Vue 3.5 及以上版本中，官方确实引入了更简洁的 Props 解构默认值写法：
const { variant = 'error' } = defineProps()
表面上看，这比 withDefaults(defineProps<...>(), { variant: 'error' }) 更干净——但它并非“开箱即用”的语法糖，而是依赖 Vue 编译器的一项实验性特性：Reactivity Transform（响应式转换）。
? 为什么 variant 在模板中是 undefined？
当你写下：
const { variant = 'error' } = defineProps()
Vue 编译器本应自动将 variant 重写为 props.variant（并包裹 getter 以维持响应追踪），从而让 {{ variant }} 等价于 {{ props.variant }}。但这一转换仅在显式启用 Reactivity Transform 时生效。
若未启用，实际发生的是：
- defineProps<...>() 返回一个 只读响应式对象（本质是 shallowReadonly
>）； - 解构操作 const { variant = ... } = props 是 JavaScript 原生行为，会立即读取当前值并创建普通局部变量；
- variant 变成一个静态字符串 'error'（非响应式），且与 props.variant 的后续变更完全脱钩；
- 模板中 {{ variant }} 渲染的是这个静态副本，因此无法响应父组件传入的 variant 更新，初始值虽能打印（因解构时 props.variant 为 undefined，触发默认值），但模板绑定不具响应性。
⚠️ 注意：console.log(variant) 输出 'error' 是因为解构瞬间执行了默认值赋值，不代表该变量具备响应式追踪能力。
✅ 正确解决方案（推荐按优先级排序）
✅ 方案一：使用 withDefaults（稳定、兼容、无副作用）
const props = withDefaults(
defineProps(),
{ variant: 'error' }
)
// 模板中直接使用 {{ props.variant }}
- ✅ 兼容所有 Vue 3.3+ 版本；
- ✅ 类型安全、语义清晰、无需额外配置；
- ✅ props.variant 是响应式源，可被 watch、computed、模板直接消费；
- ❌ 代码略冗长，但属官方长期支持的范式。
✅ 方案二：启用 Reactivity Transform（仅限短期探索，不推荐生产）
若坚持使用解构语法，需在 vite.config.ts 中显式启用（Vue 官方已明确该特性将在 Vue 3.4+ 中移除）：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue({
reactivityTransform: true // ⚠️ 关键开关
})
]
})
启用后，以下写法才真正有效：
const { variant = 'error' } = defineProps()
// 编译器自动转为：const variant = $$(props => props.variant ?? 'error')
此时 variant 在模板中可响应更新。但请务必注意：
? Vue 团队已在 RFC #570 中宣布：Reactivity Transform 将于 Vue 3.4 正式废弃并移除，因其增加了编译复杂度、破坏了 JS 语义直觉，且与标准 TypeScript 生态存在摩擦。
✅ 方案三：手动包装 getter（兼容性最强的“解构感”写法）
不依赖编译器，用标准响应式 API 实现类似体验：
const props = defineProps()
const variant = computed(() => props.variant ?? 'error')
// 模板中 {{ variant }} → 响应式计算属性
- ✅ 零配置、全版本兼容、逻辑透明；
- ✅ 支持 watch(() => props.variant, ...) 等所有响应式操作；
- ✅ 类型推导完整，IDE 支持良好。
? 总结与建议
| 方式 | 响应性 | 兼容性 | 维护性 | 推荐度 |
|---|---|---|---|---|
| withDefaults | ✅ 完整 | ✅ Vue 3.3+ | ✅ 长期支持 | ⭐⭐⭐⭐⭐ |
| Reactivity Transform | ✅（需配置） | ⚠️ 仅 Vue 3.5+ | ❌ 3.4+ 废弃 | ⚠️ 仅学习用途 |
| computed 包装 | ✅ 完整 | ✅ 所有版本 | ✅ 清晰可控 | ⭐⭐⭐⭐ |
强烈建议生产环境统一采用 withDefaults 或 computed 包装方案。所谓“更简洁”的解构语法，实则是牺牲可维护性与未来兼容性的临时便利；而 Vue 的设计哲学始终强调：明确优于隐式，稳定优于炫技。掌握 props 作为只读响应式对象的本质（shallowReadonly
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
