写在开头点赞 收藏 学会Vue 3 的 Composition API 给开发者带来了更强的逻辑组织能力但很多人用 defineProps 的方式依然停留在 Vue 2 的“Options 语法心智”。本质上只是把 props: {} 拿出来“提前声明”并没有真正理解它的运行机制、类型推导优势、默认值处理方式、解构陷阱等关键点。这篇文章不做语法搬运而是用实战视角带你了解defineProps 到底该怎么写才是专业的 Vue3 写法。 为什么说你用错了 defineProps我们先来看一个常见的 Vue3 组件写法script setup const props defineProps({ title: String, count: Number }) /script你以为这就完事了它只是基本写法。但在真实业务中我们往往会遇到需要传默认值想要类型推导解构 props 却发现响应性丢失TS 类型重复声明不够优雅这些问题defineProps 其实早就帮你解决了只是你没用对方式。✅ 正确的三种 defineProps 写法① 写法一声明式类型推导推荐interface Props { title: string count?: number } const props definePropsProps()优点自动获得类型推导在这是 Composition API 的推荐写法完全由 TypeScript 驱动而不是运行时校验。② 写法二运行时代码校验Options 式const props defineProps({ title: { type: String, required: true }, count: { type: Number, default: 0 } })优点保留 Vue2 的 props 校验逻辑更适合 JS-only 项目不使用 TS缺点类型推导不如泛型直观与 withDefaults 不兼容③ 写法三与 withDefaults 配合实战最常见const props withDefaults(defineProps{ title?: string count?: number }(), { title: 默认标题, count: 1 })优势是既能获得类型推导又能写默认值不会重复写 default比纯 defineProps 更简洁易维护注意withDefaults 只能配合泛型式 defineProps 使用不能和对象式 props 写法混用。⚠️ 高发误区警告你踩过几个 误区 1直接解构 props响应性丢失const { title, count } defineProps{ title: string, count: number }()上面的写法会让 title 和 count 成为普通变量不是响应式的。解决方式使用 toRefsconst props defineProps{ title: string, count: number }() const { title, count } toRefs(props)这样才能在 watch(title, …) 中有效监听变化。 误区 2类型和默认值重复声明const props defineProps({ title: { type: String as PropTypestring, // 写了类型 default: Hello // 又写默认值 } })在 TS 项目中这种方式显得繁琐且不智能。建议直接用泛型 withDefaults让 IDE 自动推导类型。 误区 3没有区分“开发期类型检查” vs “运行时校验”Vue3 的 Props 有两个模式TypeScript 模式靠 IDE 编译器Options 模式在浏览器运行时报错实际推荐生产环境靠 TypeScript 检查即可无需运行时 Props 校验提高性能。 defineProps 是真正的组件契约声明在 Vue3 的它声明了组件的“输入规范”它决定了类型校验、默认值逻辑它是组件文档的第一手来源你越是随便写它越容易在团队协作时踩坑。 defineProps 的进阶技巧你未必知道的几个点✔ 你可以在 defineProps 里使用类型别名type Size sm | md | lg withDefaults(defineProps{ size?: Size }(), { size: md })这是让 props.size 具备完整类型提示的关键方式。✔ 配合 defineEmits 写法更完整const emit defineEmits{ (e: submit, value: number): void (e: cancel): void }()这样写出的组件输入props 输出emit都具备契约可以被任何 IDE 精确识别。✔ defineProps 写法决定你能不能使用 Volar 的类型推导很多人发现 里没有类型提示大概率是你组件没有正确写 defineProps 的泛型。保持结构清晰是让 IDE 吃得饱的唯一方式。 小结defineProps 不只是 props它是组件健壮性的开端正确思路是在 TypeScript 项目中尽可能采用 defineProps() withDefaults() 写法做到类型明确、默认值清晰、响应式安全。 怎么判断你是否“真的会用 defineProps”❌ 你写了 defineProps 但 props 解构不响应❌ 你写 default 写得很痛苦❌ 你项目里 props 写法风格混乱❌ 你的组件在 IDE 中没有 props 自动补全✅ 如果你能做到使用泛型 withDefaults保持 props 和 emits 的契约完整清晰地类型提示和响应性解构那恭喜你是真的理解了 Vue3 的组件心智模型。如果对您有所帮助欢迎您点个关注我会定时更新技术文档大家一起讨论学习一起进步。