Vue组件Props复杂类型校验与默认值设置的关键是确保数据可预期、错误早暴露、兜底有保障；对象/数组默认值须用工厂函数返回新副本，基础类型可直接赋值，嵌套结构用shape或arrayOf约束，枚举值和业务规则用validator白名单校验，并抽离复用验证逻辑。
Vue 组件的 Props 复杂类型校验和默认值设置，关键在于让数据结构可预期、错误早暴露、兜底有保障。裸写 Object 或 Array 类型声明远远不够，必须配合验证逻辑与安全初始化。
对象/数组类 Prop 必须用函数返回默认值
Vue 对象或数组类型的默认值不能直接写成字面量，否则所有组件实例会共享同一引用，引发状态污染。必须用工厂函数返回新副本。
-
错误写法：
default: { name: 'guest' }或default: ['a', 'b'] -
正确写法：
default: () => ({ name: 'guest' })或default: () => ['a', 'b'] - 布尔、字符串、数字等基础类型可直接写默认值，如
default: false、default: 'text'
嵌套结构用 shape 或 arrayOf 明确字段约束
当 Prop 是对象且含固定字段时，用 shape 描述结构；若是数组且元素类型统一，用 arrayOf。避免只靠 Object 模糊声明。
-
type: Object→ 宽松，无字段提示 -
type: Object as PropType<{ id: number; title: string }>（TS 场景） -
validator+shape（运行时）：{ type: Object, validator: v => v && typeof v.id === 'number' && typeof v.title === 'string' } -
arrayOf示例：{ type: Array, default: () => [], validator: v => v.every(item => typeof item === 'string') }
枚举值和业务规则用 validator 精准拦截
类型检查只能保证“是字符串”，但无法保证“是合法状态”。对有限取值（如 status、theme、size），必须用 validator 做白名单校验。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
{ type: String, validator: v => ['small', 'medium', 'large'].includes(v) } - 支持异步逻辑判断（如远程校验），但注意开发阶段应同步完成，便于快速反馈
- 错误时 Vue 自动抛出警告，无需手动
console.warn
验证逻辑与业务解耦，抽离复用
重复的校验逻辑（如邮箱格式、手机号、非空数组）不要散落在各组件里。建议封装为独立函数或工具对象，保持一致性且便于维护。
- 例如：
const isValidEmail = (v: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) - 在多个组件中复用：
email: { type: String, validator: isValidEmail } - 避免把 UI 交互或副作用塞进 validator，它只负责“数据是否合规”
