defineProps 是 Vue 3 <script setup> 中声明 props 的核心方式，支持类型推导、默认值（需 withDefaults）、运行时校验及响应式解构（用 toRefs 或 computed）。
Vue 3 中使用 setup 语法糖（<script setup>）时，defineProps 是声明组件 props 的核心方式。它不仅支持基础类型校验，还能实现类型推导、默认值、运行时校验、泛型约束等高级能力，尤其在配合 TypeScript 时非常强大。
基础写法：自动推导 + 类型安全
直接用泛型传入接口或类型字面量，Vue 会自动完成类型推导和运行时校验（开发环境下）：
<script setup lang="ts">
interface User {
id: number
name: string
isActive?: boolean
}
const props = defineProps<User>()
// props.id / props.name 可被正确推导，IDE 有提示，且不传必填项会警告
</script>
带默认值的响应式 props（推荐用 withDefaults）
不能在泛型接口里写 name?: string = 'Guest' —— 这是无效的 TS 语法。正确做法是用 withDefaults 包裹 defineProps：
<script setup lang="ts">
const props = withDefaults(
defineProps<{
title: string
count?: number
theme?: 'light' | 'dark'
}>(),
{
count: 0,
theme: 'light',
// 函数形式支持依赖计算（注意：不能访问 setup 内部变量）
title: () => 'Default Title'
}
)
</script>
运行时校验 + 类型双重保障（兼容 JS 或弱类型场景）
当项目没用 TypeScript，或需额外运行时逻辑（如自定义校验、兼容旧数据结构），可用对象形式写 props：
立即学习“前端免费学习笔记（深入）”；
- 键名为 prop 名，值为配置对象，支持
type、required、default、validator -
type支持构造函数（String、Number）或自定义类，也支持数组（多类型） -
validator接收实际值，返回布尔值决定是否通过
<script setup>
const props = defineProps({
status: {
type: String,
required: true,
validator: (val: string) => ['success', 'error', 'warning'].includes(val)
},
tags: {
type: Array as PropType<string[]>,
default: () => []
}
})
</script>
组合式 Props：解构后保持响应性（小心！）
直接解构 props 会丢失响应性（因为解构的是普通对象）。正确方式有两种：
-
用
toRefs解构（适合需要分别使用多个 prop 的场景）：const { title, count } = toRefs(props)→ 得到的是Ref，模板中仍需{{ title.value }}，但逻辑中可响应更新 -
用
computed包装（更语义化，推荐）：const fullName = computed(() => `${props.firstName} ${props.lastName}`)
⚠️ 注意：defineProps 返回的对象本身是响应式的，模板中直接 {{ props.title }} 没问题；仅在 setup 脚本内需要响应式引用时才需处理。
