浅拷贝适用于扁平状态结构或仅替换顶层字段，如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）。

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

• ❌ 错误：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)

配合不可变更新模式的实用写法

浅拷贝 + 结构化展开，是现代框架中最常用、最易维护的组合。

立即学习“Java免费学习笔记（深入）”；

• 更新对象某字段：{ ...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() 数组，要返回新数组
• 两者共通原则：只要用了浅拷贝，后续所有嵌套变更都必须“逐层展开”，不能跳过中间层级