withdefaults 仅用于 中配合 defineprops 设置 props 默认值，基础类型可直接赋值，引用类型须用函数返回以避免共享状态，不支持选项式 api 且不可用于 required prop。
在 Vue 单文件组件（SFC）中使用 withDefaults 设置 props 默认值，核心是配合 defineProps 在 <script setup></script> 里完成类型声明与默认值绑定。它只适用于组合式 API 的 setup 语法糖，不支持选项式 API。
基础写法：对象类型直接赋值
当 props 是基础类型（如 string、number、boolean）或简单对象时，可以直接用字面量设默认值：
-
message没传时显示'Hello, Vue 3!' -
count没传时取0 - 注意：可选属性需用
?标识，否则 TypeScript 会报错
<script setup lang="ts"><br>import { withDefaults, defineProps } from '<a style="color:#f60; text-decoration:underline;" title= "vue"href="https://m.php.cn/zt/15721.html" target="_blank">vue'<br><br>const props = withDefaults(<br> defineProps<{<br> message?: string<br> count?: number<br> } >(),<br> {<br> message: 'Hello, Vue 3!',<br> count: 0<br> }<br>)<br></script>
复杂类型：数组和对象必须用函数返回
对于引用类型（如 Array、Object、自定义接口），默认值必须包裹在函数中，避免多个组件实例共享同一份内存：
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 数组默认值写成
() => []或() => [{ name: '张三', age: 18 }] - 对象默认值写成
() => ({ title: '默认标题', value: 0 }) - 不这么做会导致响应式失效或状态污染
<script setup lang="ts"><br>interface User { name: string; age: number }<br><br>const props = withDefaults(<br> defineProps<{<br> users?: User[]<br> config?: { title: string; size: 'sm' | 'lg' }<br> } >(),<br> {<br> users: () => [],<br> config: () => ({ title: '未命名', size: 'sm' })<br> }<br>)<br></script>
和运行时声明的区别
不用 withDefaults 也能设默认值，比如这样写：
defineProps({
message: { type: String, default: 'Hello' }
})
但这种方式属于运行时声明，需要额外引入 PropType、手动做类型断言，TS 类型推导弱。而 withDefaults 完全基于 TypeScript 接口，类型更准、代码更干净、IDE 支持更好。
注意事项
- 只能在
<script setup></script>中使用，普通<script></script>或选项式 API 不支持 - 默认值仅在父组件未传递该 prop 时生效；传了
undefined也会触发默认值 - 不能用于
required: true的 prop —— 既然必传，就不该设默认值 - 不需要 import
withDefaults和defineProps，它们是编译时宏，开箱即用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
