defineprops 是 vue 3 composition api 中声明组件 props 的核心工具，支持运行时类型校验、编译时 typescript 类型推导，需在 顶层使用且不可解构。
在 Vue 3 的 Composition API 中，defineProps 是用来声明组件接收的 props 的核心工具。它支持运行时类型校验（基于 JavaScript 类型）和编译时类型推导（配合 TypeScript），语法简洁且语义清晰。
基础用法：用对象形式定义 props 及类型校验
最常用的方式是传入一个对象，每个 key 对应一个 prop 名，value 是其配置项，其中 type 字段指定期望的 JavaScript 构造函数（如 String、Number、Boolean、Array、Object 等），Vue 会在开发模式下自动校验传入值是否匹配：
- 字符串校验：
title: { type: String, required: true } - 数字校验：
count: { type: Number, default: 0 } - 布尔值 + 默认值：
disabled: { type: Boolean, default: false } - 数组或对象（注意要用数组写法）：
list: { type: [Array, null], default: () => [] }
支持多类型与自定义校验函数
当一个 prop 可接受多种类型时，type 可以是构造函数组成的数组；若需更复杂的逻辑（比如范围检查、格式验证），可使用 validator 函数：
- 多类型：
id: { type: [String, Number] } - 自定义校验：
email: { type: String, validator: (val) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val) } - validator 函数只在开发环境执行，返回
true表示通过，否则报 warning
配合 TypeScript 使用（推荐）
如果项目启用 TypeScript，可以直接用接口或类型别名定义 props 结构，让 defineProps 进行类型推导，既获得 IDE 提示，又避免重复写 type 配置：
- 定义接口：
interface Props { title: string; count?: number; tags: string[] } - 传入泛型：
const props = defineProps<props>()</props> - 此时无需写
type和required，TS 会根据类型本身判断必选/可选
注意事项与常见问题
defineProps 是一个编译时宏，只能在 <script setup></script> 顶层使用，不能出现在函数内或条件中；它返回的是响应式 props 对象，但不支持直接解构（会丢失响应性）：
- ❌ 错误：
const { title, count } = defineProps(...)→ 解构后失去响应性 - ✅ 正确：
const props = defineProps(...); console.log(props.title) - 默认值为引用类型（如数组、对象）时，
default必须是函数，防止多个组件实例共享同一引用
