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 也会跟着变——这是典型的隐性数据污染。
- config: { type: Object, default: () => ({ apiBase: '/api', timeout: 3000 }) }
- list: { type: Array, default: () => ['默认项'] }
函数在每次组件实例化时执行一次，确保每个实例拿到的是独立副本。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
父组件传了部分字段？靠 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></string>），withDefaults 配合纯 TypeScript 接口更干净、类型推导更准：
- 定义接口描述结构：
interface Params { label?: string; options?: string[]; disabled?: boolean } - 用 withDefaults 注入默认值：
const props = withDefaults(defineProps<params>(), { label: '请选择', disabled: false, options: () => ['A', 'B'] })</params>
IDE 补全、参数提示、类型校验都更完整，还能避免手写 PropType 的样板代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
