vue props验证是分三层的运行时约束机制：类型校验（type）、必填与默认值（required/default）、自定义校验（validator），需显式声明type才能启用validator，失败仅警告不阻断渲染。
Vue 组件中 Props 的验证逻辑不是简单的类型匹配，而是一套分层、可扩展、运行时生效的约束机制。它既保障数据安全，又兼顾开发体验，关键在于理解它的执行时机、组合规则和边界行为。
Props 验证的三层结构
Vue 的 Props 验证由三个层级协同完成：
-
类型校验（type）：最基础一层，检查值是否为指定构造函数的实例（如 String、Number、Array），或满足 instanceof/typeof 判断；支持数组写法（
[String, Number]）表示多类型容许。 -
必填与默认值（required / default）：决定 Prop 是否强制传入；若未传且定义了
default，Vue 会自动调用该函数（对象/数组必须返回函数）并赋值；required: true未传时直接触发警告。 - 自定义校验（validator）：唯一能表达业务语义的层，接收 prop 当前值作为参数，返回布尔值；可用于范围判断、格式校验、结构合法性（如数组非空、对象含特定字段）甚至跨 prop 关联检查（需配合组件实例访问其他 prop）。
validator 函数的关键细节
validator 看似简单，但实际使用中容易踩坑：
- 必须显式声明
type（哪怕设为null）才能启用 validator；仅写 validator 不生效。 - 它在组件初始化和父组件更新 prop 时都会执行，包括 type 校验失败后（此时参数可能是
undefined或转换失败的值）。 - 不建议 throw Error——Vue 不捕获，可能中断渲染流程；推荐用
console.warn输出清晰提示，例如：console.warn(`[MyComponent] 'status' must be one of: 'draft', 'published', 'archived', but got: ${value}`)。 - 若需依赖其他 prop 做校验（如 “当
mode为 'edit' 时，id必须存在”），可在 validator 内通过this访问组件实例，读取this.mode等属性（注意：此时this已初始化，但 data 尚未响应式代理完成，稳妥做法是只读 props）。
验证失败的实际表现
所有验证失败（type 不符、required 缺失、validator 返回 false）均不会阻止组件渲染，仅在开发环境控制台抛出警告（production 下静默）：
- 警告信息包含组件名、prop 名、期望条件及实际值，便于快速定位问题。
- 即使验证失败，prop 值仍会被赋给组件实例（除非被 default 覆盖），子组件逻辑需自行防御性处理（如
v-if="id"或id ?? ''）。 - 验证发生在响应式系统建立之前，因此不会触发额外的 getter/setter 或依赖收集。
规范化与内部处理机制
Vue 在组件选项合并阶段就对 props 进行规范化（normalize）：
- 数组写法
props: ['foo', 'bar']会被转为{ foo: { type: null }, bar: { type: null } }，为后续校验铺路。 - 对象写法中的每个 prop 都被标准化为完整配置对象，缺失项（如未写
type）会被补全为null，default未定义则为undefined。 - 规范化后的 props 配置最终交由
validateProp函数统一执行校验逻辑，该函数位于 Vue 源码core/util/props.js中，是整个验证流程的核心入口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
