浅拷贝适用于扁平状态结构或仅替换顶层字段，如react中setstate({ ...prev, count: prev.count + 1 })；但修改嵌套属性时必须逐层展开，否则会因共享引用破坏不可变性。
浅拷贝在组件状态管理中不是“能不能用”，而是“在哪一层用、怎么避免副作用”。它适合隔离顶层结构，但必须避开嵌套对象的直接修改。
什么时候该用浅拷贝
当状态是扁平结构（无嵌套对象或数组），或你只打算替换整个字段而非修改内部属性时，浅拷贝既轻量又安全。
- React 中更新 state：setState({ ...prevState, count: prevState.count + 1 }) —— 只改顶层字段，安全
- Vue 2 的 data 合并：Object.assign({}, this.formData, { email: 'new@ex.com' })
- Pinia store 中重置部分字段：state = { ...state, loading: false }
哪些操作会意外破坏浅拷贝的隔离性
问题不在于拷贝本身，而在于拷贝后是否对引用类型做了就地修改（mutate in place）。
- ❌ 错误：const copy = { ...original }; copy.profile.name = 'Alice'; // 修改了 original.profile
- ❌ 错误：const list = [...items]; list[0].status = 'done'; // items[0] 被同步改写
- ✅ 正确：const copy = { ...original, profile: { ...original.profile, name: 'Alice' } }
- ✅ 正确：const newList = items.map(item => item.id === targetId ? { ...item, status: 'done' } : item)
配合不可变更新模式的实用写法
浅拷贝 + 结构化展开，是现代框架中最常用、最易维护的组合。
- 更新对象某字段：{ ...obj, config: { ...obj.config, timeout: 5000 } }
- 更新数组中某个元素：items.map(i => i.id === id ? { ...i, active: true } : i)
- 删除数组项：items.filter(i => i.id !== id)
- 添加新项：[...items, newItem]
Vue 和 React 中的特别提醒
Vue 的响应式系统依赖对象引用追踪。浅拷贝后若仍使用原引用（如未解构就赋值），Vue 可能无法触发更新；而 React 的 useState 要求每次更新都传入新引用，否则跳过渲染。
- Vue：避免 this.form = Object.assign(this.form, newData) —— 这是就地修改，应改为 this.form = { ...this.form, ...newData }
- React：不要在事件处理器里直接 push() 或 splice() 数组，要返回新数组
- 两者共通原则：只要用了浅拷贝，后续所有嵌套变更都必须“逐层展开”，不能跳过中间层级
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
