Vue 3 中 withDefaults 是在编译阶段为 defineProps 声明的可选 props 设置默认值的推荐方式，需配合 TypeScript 使用，对象/数组等引用类型默认值必须用工厂函数返回，仅适用于 。
Vue 3 中用 withDefaults 设置 Props 默认值，核心是配合 defineProps 在 <script setup></script> 里使用，尤其适合 TypeScript 场景。它不是运行时赋值，而是在编译阶段就确定默认行为，既保持类型安全，又避免手动判空。
基础写法：withDefaults + 类型泛型
这是目前 Vue 官方推荐、TS 友好的主流方式：
- 先用
defineProps()声明 props 的结构和类型 - 再用
withDefaults包裹它，并传入一个对象，为可选属性（带?）或非必填字段指定默认值 - 基本示例：
const props = withDefaults(defineProps(), {
title: '默认标题',
count: 0,
items: () => [] // 数组/对象必须用工厂函数
})注意：对象或数组类型的默认值一定要用函数返回，防止多个组件实例共享同一引用。
复杂类型处理：接口 + 工厂函数
当 props 包含嵌套对象或自定义接口时，推荐先定义接口，再在 withDefaults 中复用：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 定义接口描述结构，比如
interface User { name: string; age: number } - props 类型写成
User | undefined或直接User（若设默认值则可不加?） - 默认值仍需工厂函数：
user: () => ({ name: '游客', age: 0 })
错误写法示例（会导致响应式失效或类型报错）：
// ❌ 错误：解构后设默认值不触发响应式初始化
const { title = '默认' } = defineProps()
// ❌ 错误：对象字面量默认值会共享引用
default: { name: 'A', age: 10 } // 多个组件实例共用这个对象和传统运行时写法的区别
过去常用 defineProps({ title: { type: String, default: 'xxx' } })，它属于运行时声明，需要 PropType 断言、冗余语法多；而 withDefaults 是基于类型声明：
- 不用引入
PropType，代码更干净 - 类型推导完整，IDE 补全和错误提示更准
- 默认值逻辑与类型定义分离，职责清晰
- 只在父组件未传该 prop 时生效，行为与运行时方式一致
注意事项
-
withDefaults仅适用于<script setup></script>，选项式 API 不支持 - 必填属性（无
?）不能设默认值，否则 TS 会报错 - 函数、正则、日期等引用类型默认值也必须用工厂函数
- 模板中可直接使用
{{ props.title }}，无需额外判断是否为 undefined
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
