最安全优雅的方式是用工厂函数返回新对象，因对象字面量会导致多个组件实例共享同一引用，引发引用污染；Vue 中 default 必须为无参函数，React 中推荐组件内解构合并或 useMemo。
子组件给 Props 设置对象默认值，最安全优雅的方式是用 函数返回默认对象，但必须确保每次调用都返回 全新对象——不能直接返回字面量对象或复用同一引用。
为什么不能直接写对象字面量？
Vue 和 React 都不允许多个实例共享同一个对象引用作为默认值。比如：
❌ 错误写法（Vue）：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 = {} }) {<br> const finalConfig = { theme: 'light', size: 'md', ...config };<br> return <div>{finalConfig.theme}</div>;<br>}
或者用 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）或结构化展开，而不是手动递归复制
