Vue组件Props需编译期（TypeScript+PropType）与运行时（type+validator+required）双层校验，Object/Array默认值须用工厂函数，解构会破坏响应式，应通过toRef或getter监听。
单靠 TypeScript 接口或只写 type: String 都不够——前者在生产环境不生效，后者拦不住 null 或 undefined。真正健壮的 props 设计，必须让类型声明、校验逻辑和响应式行为协同工作。
类型声明要带语义，不只是构造函数
基础类型如 String、Number 只做构造函数匹配，但 null 和 undefined 会通过所有原生类型检查。所以：
- 必填字段一定要加
required: true，否则props.title.toUpperCase()可能直接报错 - 多类型声明如
type: [String, Number]允许传入数字，但后续调用字符串方法会失败——这时要用validator做语义判断，比如确保传进来的是“可转为字符串的值” - 复杂类型（
Object、Array）必须配合 TypeScript 接口 +PropType，否则 IDE 提示弱、运行时无结构保障
默认值必须用工厂函数
对象或数组类默认值如果写成字面量，会导致所有组件实例共享同一引用：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- ❌
default: {}或default: []—— 修改一个实例的 props 会影响其他实例 - ✅
default: () => ({ name: '', id: 0 })或default: () => ['a']—— 每次创建新副本 - 在
withDefaults(defineProps<T>(), {...})中，同样要对Object/Array字段返回工厂函数
运行时校验不能只依赖 type
type 是第一道门槛，但业务逻辑需要更细粒度控制：
立即学习“前端免费学习笔记（深入）”；
- 数值范围：比如
age: { type: Number, validator: v => v >= 0 && v - 对象结构：比如
user: { type: Object, validator: u => u && typeof u.id === 'number' && typeof u.name === 'string' } - 必填字段组合：比如
src和alt至少有一个存在，可用 validator 统一判断
响应式行为受传递方式影响，解构会断链
props 本身是响应式代理，但一旦解构，就变成普通值：
- ❌
const { count } = defineProps()后再watch(count, ...)不会响应变化 - ✅ 改用
watch(() => props.count, ...)或toRef(props, 'count') - 父组件传
:title="refTitle"（ref）、:user="reactiveUser"（reactive）才触发深度响应；传字面量如:title="'hello'"则完全静态
