withDefaults 是 Vue 3 中兼顾类型安全与运行时默认值的关键方案：它使 TypeScript 将可选 prop 收窄为非 undefined 类型，且要求引用类型默认值必须用工厂函数，再配合 validator 进行业务校验。
Vue 3 中用 withDefaults 设置 Props 默认值，是兼顾类型安全与运行时行为的关键做法。它不只是“填个空”，而是让 TypeScript 知道哪些字段即使没传，也不会是 undefined，从而避免类型报错和运行时访问错误。
为什么不能只靠接口里的 ?
TypeScript 接口中的 count?: number 只表示“可选”，不代表“有默认值”。Vue 运行时仍会把未传的 count 当作 undefined，组件里直接写 props.count.toFixed(2) 就会报错。
withDefaults 才是真正告诉 Vue：“这个 prop 没传时，就用我指定的值”——类型系统也会据此把 count 的类型从 number | undefined 收窄为确定的 number。
基础写法：类型接口 + 默认对象
推荐先定义清晰的接口，再用 withDefaults 包裹：
立即学习“前端免费学习笔记（深入）”；
- 接口声明结构和可选性：interface ButtonProps { label: string; size?: 'sm' | 'md' | 'lg'; disabled?: boolean }
- 调用时传入默认值：const props = withDefaults(defineProps<ButtonProps>(), { size: 'md', disabled: false })
-
label没出现在默认对象中 → 仍是必传项；size和disabled虽标了?，但因 withDefaults 而获得确定类型
引用类型默认值：必须用工厂函数
Object、Array 是引用类型，直接写默认值会导致多个组件实例共享同一份数据：
- ✅ 正确：
items: () => []或config: () => ({ timeout: 5000 }) - ❌ 错误：
items: []或config: { timeout: 5000 }（所有实例共用该数组或对象） - 即使用了 withDefaults，引用类型也必须用函数返回新实例，否则响应式和数据隔离都会出问题
配合 validator 做业务级校验
类型和默认值解决的是“结构”和“存在性”，而 validator 处理“合理性”：
- URL 必须以
https://开头：apiUrl: { type: String, validator: v => v?.startsWith('https://') } - 数字必须为正整数：
timeout: { type: Number, validator: v => Number.isInteger(v) && v > 0 } - 对象必须含关键字段：
config: { type: Object as PropType<Config>, validator: v => v && 'baseUrl' in v }
validator 在开发时给出控制台警告，不中断渲染，但能第一时间暴露非法传参。
