defineprops 应严格声明类型、必填、默认值和校验规则，对象形式最严谨，数组形式仅适用于简单场景，配合 typescript 接口可实现编译期防护，且需避免直接解构 props 导致响应性丢失。
在子组件中用 defineProps 严格声明接收属性，核心是“类型明确、校验到位、响应式自动保留”。不是只写个变量名，而是通过对象或数组形式把每个 prop 的类型、是否必填、默认值、自定义验证都提前约定好，让父组件传参时有据可依，运行时少出错。
用对象形式声明：支持完整校验规则
这是最常用也最严谨的方式，尤其适合需要类型安全和逻辑约束的场景：
-
type 字段必须写清楚，比如
String、Number、Boolean、Array、Object，甚至可以是自定义构造函数或联合类型（如String | Number） - required: true 显式标记必传项，Vue 编译期会检查父组件是否遗漏
-
default 给非必填项设默认值，注意对象/数组要写函数返回（
default: () => ({})），避免引用共享 -
validator 可加自定义逻辑，比如
validator: value => value > 0 && value
示例：
const props = defineProps({
title: {
type: String,
required: true
},
maxCount: {
type: Number,
default: 10,
validator: (val) => val >= 0 && val []
}
})
用数组形式声明：适合简单、无校验需求的场景
仅列出 prop 名称，适用于快速原型或内部组件，但不推荐用于生产环境，因为完全放弃类型检查和默认值控制：
- 写法简洁：
defineProps(['title', 'count', 'isActive']) - 所有 prop 默认为
any类型，无默认值，无必填提示 - 无法做类型推导，TypeScript 下失去智能提示和编译报错能力
配合 TypeScript 使用：真正实现编译期防护
如果项目启用 TS，建议直接用类型接口 + defineProps，更直观且强约束：
interface Props {
title: string
count?: number // 可选
status: 'active' | 'inactive'
}
const props = defineProps<props>()</props>
这样不仅有类型提示，还能在父组件使用子组件时，编辑器实时提示哪些属性漏传、类型错配，比纯 JS 对象写法更可靠。
注意响应式与解构陷阱
props 是响应式对象，但直接解构会丢失响应性：
- ❌ 错误：
const { title, count } = props→ 解构后变量不再响应更新 - ✅ 正确：用
toRefs(props)或始终通过props.title访问 - 如需解构并保持响应，推荐：
const { title, count } = toRefs(props)
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
