Props工厂函数返回对象会导致多实例共享引用而污染状态，因JavaScript对象浅拷贝机制与Vue响应式初始化时机共同作用；正确做法是每次返回全新对象字面量或显式解构复制。
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 对象做响应式包装：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：
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 默认值必须是“每次调用都新鲜”的数据。只要记住“对象要字面量创建”，就基本不会掉进这个坑。
