props 是组件接收外部数据的入口，属性检测是保障组件稳定运行的必要环节，发生在初始化阶段且早于 data 和 computed；必须显式声明 props 才能触发校验，推荐用对象形式定义并覆盖类型、默认值、必填及自定义验证规则。

Props 是组件接收外部数据的入口，属性检测不是可选动作，而是保障组件稳定运行的必要环节。它发生在组件初始化阶段，早于 data 和 computed 的创建，因此所有校验逻辑必须独立于实例状态。

明确声明 Props 才能触发检测

如果子组件没在 props 选项中显式列出某个属性，哪怕父组件传了，Vue 也不会将其纳入 props 对象，更不会做任何校验。测试时常见错误就是漏写声明，导致 wrapper.props().xxx 返回 undefined。

推荐始终使用对象形式定义，哪怕只做基础类型检查：

• props: { title: String } —— 简单类型约束
• props: { list: { type: Array, default: () => [] } } —— 带默认值的引用类型
• props: { status: { type: String, validator: v => ['active', 'pending', 'done'].includes(v) } } —— 枚举值校验

类型校验要覆盖常见误传场景

String/Number/Boolean 这些基础类型看似简单，但实际容易出错。比如父组件写 :count="123" 没问题，但写成 count="123"（没加冒号）就会传入字符串 "123"，触发 Number 类型校验失败。

多类型支持很实用：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• type: [String, Number] 允许数字或字符串 ID
• type: Object 配合 default: () => ({}) 避免共享引用
• type: Function 用于传入回调，但注意不能直接在 template 中调用

必填与默认值需配合使用

required: true 表示该 prop 不可省略，但不等于“不能为 undefined”——如果父组件传了 :name="undefined"，依然会通过校验。真正需要兜底的是 default。

注意两点：

• 引用类型（Array/Object）的 default 必须是函数返回值，否则多个实例会共用同一份数据
• default 函数里访问不到 this，因为它在实例创建前就执行了

自定义 validator 要聚焦业务规则

validator 不是用来替代 type 的，而是补充语义约束。比如一个日期 prop，type 可以是 Date，但业务上可能要求“不能早于今天”：

• validator: val => val instanceof Date && val >= new Date()
• 返回 false 时，开发环境下会抛警告，生产环境静默忽略
• 避免在 validator 里调用 API 或依赖响应式数据