子组件优雅设置 Props 对象默认值的正确方式

在 Vue 和 React 中为子组件的 Props 对象设置默认值时，直接使用对象字面量会导致多个组件实例共享同一引用，引发隐蔽而危险的“引用污染”问题；最安全优雅的解法是始终通过工厂函数（如 `default() { return { ... }; }` 或 `config = {}` 后合并）动态生成全新对象，而非复用静态引用——这不仅规避了状态交叉干扰，还兼顾了类型安全、可维护性与框架最佳实践，是前端工程师必须掌握的关键细节。

子组件给 Props 设置对象默认值，最安全优雅的方式是用 函数返回默认对象，但必须确保每次调用都返回 全新对象——不能直接返回字面量对象或复用同一引用。

为什么不能直接写对象字面量？

Vue 和 React 都不允许多个实例共享同一个对象引用作为默认值。比如：

props: { config: { type: Object, default: { theme: 'light', size: 'md' } } }

所有组件实例会共用这个 { theme: 'light', size: 'md' } 对象。一旦某个实例修改了 config.theme，其他实例也会同步变——这是典型的引用污染。

正确做法：用工厂函数返回新对象

必须让 default 是一个函数，且每次执行都返回一个新对象：

props: { config: { type: Object, default() { return { theme: 'light', size: 'md' }; } } }

注意：不能写成箭头函数（会丢失 this 上下文，且 Vue 3 的 setup 中也不推荐依赖 this），更关键的是，它必须是函数调用，不是函数引用。

常见错误写法：

• default: () => ({ theme: 'light' }) —— 看似没问题，但若该函数被多次复用（如在多个 props 中重复使用），仍可能因缓存或提升导致意外共享（尤其在 SSR 或某些构建场景下）
• default: getDefaultConfig（直接传函数名）—— 这是函数引用，Vue 会把它当静态值处理，只执行一次，后续所有实例拿到的仍是同一个对象

React 中同理：避免在 defaultProps 里写对象字面量

React 的 defaultProps 同样禁止对象字面量：

不在 defaultProps 做对象默认值，而是在组件内部用逻辑兜底：

function MyComponent({ config = {} }) {
  const finalConfig = { theme: 'light', size: 'md', ...config };
  return

或者用 useMemo 避免每次渲染都新建（仅当 config 变化才更新）：

const finalConfig = useMemo(() => ({ theme: 'light', size: 'md', ...config }), [config]);

进阶建议：类型安全 + 可维护性

• 把默认配置抽成常量，但用函数包裹再导出，确保调用即新建：export const createDefaultConfig = () => ({ theme: 'light', size: 'md' });，然后在 props 中写 default: createDefaultConfig
• TypeScript 中配合 Partial 和解构，让默认合并更明确：const merged = { ...createDefaultConfig(), ...props.config };
• 如果默认值较复杂（含嵌套对象、数组），优先用深克隆工具（如 lodash.cloneDeep）或结构化展开，而不是手动递归复制

本篇关于《子组件优雅设置 Props 对象默认值的正确方式》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！