Vue props validator 是接收 prop 值的纯函数，返回 true 表示通过，false 或 console.warn 触发开发警告；支持枚举校验、长度/格式/范围约束、闭包复用及多条件组合，但不可含副作用或 throw Error。
用 validator 函数做精准类型与逻辑校验
Vue 的 props validator 不只是检查是否为 String 或 Number，它真正强大的地方在于能写任意 JavaScript 逻辑——比如校验字符串长度、数值范围、枚举值合法性、对象结构完整性，甚至异步依赖（需配合其他机制）。关键在于：validator 是一个接收 prop 值的函数，返回 true 表示通过，false 或抛出错误会触发 Vue 的警告（开发环境）。
基础写法：校验固定枚举和格式约束
直接在 props 定义中内联 validator 函数，适合轻量级规则：
- 校验按钮类型只能是
'primary'、'secondary'、'danger'之一：type: { type: String, validator: val => ['primary', 'secondary', 'danger'].includes(val) } - 限制输入长度不超过 20 字符：
title: { type: String, validator: val => typeof val === 'string' && val.length - 确保传入的 ID 是正整数字符串或数字：
id: { type: [String, Number], validator: val => (typeof val === 'string' ? /^\d+$/.test(val) : typeof val === 'number') && val > 0 }
进阶技巧：复用校验逻辑与组合判断
把 validator 抽成独立函数，便于测试、复用和团队协作。支持多条件组合，也方便添加上下文提示：
- 定义可复用的校验器：
const isValidEmail = (val) => typeof val === 'string' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);const isRequired = (val) => val != null && val !== ''; - 组合使用（注意：validator 只接收单个值，需自行封装逻辑）：
email: { type: String, validator: val => isRequired(val) && isValidEmail(val) || console.warn('邮箱格式不合法或为空') } - 利用闭包传递额外参数（如最小长度）：
const minLength = (min) => (val) => typeof val === 'string' && val.length >= min;description: { type: String, validator: minLength(10) }
注意事项与边界处理
validator 运行在组件初始化和 prop 更新时，但不会阻止赋值，只起提示作用。实际业务中建议配合默认值、v-model 修饰或父组件约束来兜底：
- validator 中避免副作用（如 API 调用、修改响应式数据），它应是纯函数
- 不要在 validator 里 throw Error（Vue 会捕获并静默处理），用
console.warn更清晰 - 对复杂嵌套对象，建议用
JSON.stringify粗略判断结构，或用Object.keys()校验必填字段 - TypeScript 用户注意：validator 不影响类型推导，仍需靠类型声明保证 IDE 提示和编译检查
