Vue.js组件通信Props工厂函数生成对象默认值避坑指南-Vue.js-PHP中文网

Props工厂函数返回对象会导致多实例共享引用而污染状态，因JavaScript对象浅拷贝机制与Vue响应式初始化时机共同作用；正确做法是每次返回全新对象字面量或显式解构复制。

vue.js组件通信props工厂函数生成对象默认值避坑指南

Vue.js 中用 Props 工厂函数（即 props: () => ({})）设置对象默认值时，容易因对象引用共享导致多个组件实例间状态污染。这不是 Vue 的 bug，而是 JavaScript 对象浅拷贝机制和 Vue 响应式初始化时机共同作用的结果。

为什么 props 工厂函数返回对象会出问题

当 props 定义为工厂函数并返回一个对象（如 props: () => ({ list: [] })），这个对象在组件首次创建时被复用——所有使用该组件的实例，其 list 属性都指向同一个数组引用。一旦某个实例修改了 list.push() 或 list.length = 0，其他实例也会“看到”变化，尤其在 v-for 渲染、表单联动或动态列表场景中极易暴露。

正确写法：每次返回全新对象

必须确保工厂函数每次调用都生成独立副本。对基础类型（string、number、boolean）无影响，但对象/数组需显式构造：

✅ 推荐：用字面量直接创建新对象 props: () => ({ user: {}, config: { theme: 'light' }, items: [] })
✅ 复杂结构可用解构或 Object.assign：props: () => ({ ...defaultConfig, items: [...defaultItems] })
❌ 避免：将对象定义在外部再返回引用 const defaultObj = { a: 1 }; props: () => defaultObj
❌ 避免：用 JSON.parse(JSON.stringify()) 深拷贝（性能差、不支持函数/Date/undefined 等）

进阶避坑：响应式默认值与 setup() 中的处理

在 setup() 中接收 props 后，若需基于默认值做响应式处理（如 ref 或 reactive），不要直接用 props 对象做响应式包装：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

❌ 错误：const state = reactive(props.defaultData) —— 仍共享引用
✅ 正确：const state = reactive({ ...props.defaultData }) 或 reactive(JSON.parse(JSON.stringify(props.defaultData)))（仅限简单数据）
✅ 更安全：在 setup() 内部用 toRef 或 computed 包装，避免直接修改 props

验证是否踩坑的小技巧

快速检查多实例是否共享默认对象：

在模板中加 {{ defaultObj === $options.propsData?.defaultObj }}，不同实例输出 true 就说明是同一引用
在 mounted 中打印 console.log('id:', Math.random(), props.items)，对比多个组件实例的 items 是否有相同 __ob__（Vue 2）或 __v_isReactive（Vue 3）内部标识
单元测试中渲染两个组件实例，修改其中一个的 props 对象属性，断言另一个未受影响

本质上不是 Vue 的限制，而是开发者需要明确：props 默认值必须是“每次调用都新鲜”的数据。只要记住“对象要字面量创建”，就基本不会掉进这个坑。