Vue中props默认值仅在父组件未传递该prop时生效；基础类型可直接设默认值，对象数组须用函数返回新实例；部分传参需computed合并补全；TS项目推荐withDefaults+接口。

Vue 渲染流程中，props 默认值只在父组件完全未传该 prop时生效；一旦传了（哪怕是个空对象、空数组或部分字段），默认值就不再起作用。关键不是“有没有值”，而是“有没有传”。

基础类型默认值直接写，安全又简洁

字符串、数字、布尔这些原始类型没有引用共享风险，default 直接写值就行：

• title: { type: String, default: '标题' }
• count: { type: Number, default: 0 }
• disabled: { type: Boolean, default: false }

这类写法在初始化和后续更新中都稳定可靠，不会引发意外修改。

对象和数组必须用函数返回新实例

如果 default 写成 {} 或 []，多个组件实例会共用同一内存地址。一个实例改了内部属性，其他实例的 props 也会跟着变——这是典型的隐性数据污染。

立即学习“前端免费学习笔记（深入）”；

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• config: { type: Object, default: () => ({ apiBase: '/api', timeout: 3000 }) }
• list: { type: Array, default: () => ['默认项'] }

函数在每次组件实例化时执行一次，确保每个实例拿到的是独立副本。

父组件传了部分字段？靠 computed 合并补全

default 只管“传没传”，不管“传全没传”。比如父组件只传了 paramsObj: { showHandleCol: true }，但子组件还依赖 tabList 和 isTagData，这时 default 不会自动填充缺失字段。

• 先把 props 声明为可选且 default 返回空对象：paramsObj: { type: Object, default: () => ({}) }
• 再用 computed 浅合并默认结构与传入值：computed: { finalParams() { return { tabList: [], showHandleCol: false, isTagData: false, ...this.paramsObj } } }

这样既保留父组件传来的字段，又兜底补全必要属性，避免运行时报错。

TypeScript 项目优先用 withDefaults + 接口

相比运行时声明（如 type: Array as PropType<string[]>），withDefaults 配合纯 TypeScript 接口更干净、类型推导更准：

• 定义接口描述结构：interface Params { label?: string; options?: string[]; disabled?: boolean }
• 用 withDefaults 注入默认值：const props = withDefaults(defineProps<Params>(), { label: '请选择', disabled: false, options: () => ['A', 'B'] })

IDE 补全、参数提示、类型校验都更完整，还能避免手写 PropType 的样板代码。