浅拷贝仅复制第一层结构，嵌套引用类型仍共享内存，导致跨组件数据污染；应按场景选structuredclone、lodash.clonedeep或json序列化等方案隔离引用。

明确问题根源：浅拷贝不等于隔离

浅拷贝（如 [...arr]、Array.from()、arr.slice()）只复制数组或对象的第一层结构。如果内部含有对象、嵌套数组、函数或 Date 等引用类型，这些值仍共享内存地址。在跨组件场景中（如 React props 传递、Vue 共享状态、微前端子应用间数据流转），一个组件修改了副本中的嵌套对象，另一个组件读取的原始数据会同步变化——这不是“意外”，而是 JavaScript 引用机制的必然结果。

识别典型表现

以下现象往往指向浅拷贝引发的引用污染：

• 父组件传入一个含对象的数组，子组件调用 .map(item => { item.name = 'xxx' }) 后，父组件 state 意外更新
• 两个并列组件各自接收同一份配置对象，其中一个动态添加字段，另一个组件 UI 突然响应变更
• 微前端中主应用向子应用透传 config 对象，子应用修改其 config.api.timeout，导致其他子应用请求超时逻辑错乱
• 使用 Object.assign({}, obj) 处理表单初始值，提交前修改了 form.user.profile，但重置按钮无法还原原始 profile 结构

按需选择切断引用的方案

关键不是“一律深拷贝”，而是根据数据结构复杂度和运行环境选最稳妥的方式：

• 纯原始值一维数组/对象（如 [1, 'a', true] 或 {id: 1, title: 'test'}）→ 直接用 扩展运算符 或 slice() 即可，安全且高效
• 含嵌套对象但无特殊类型（如 {user: {name: '', settings: {theme: 'dark'}}}）→ 优先使用原生 structuredClone()：const safeCopy = structuredClone(original)。它支持 Map、Set、Date、RegExp、循环引用，现代浏览器及 Node.js 18.10+ 均默认可用
• 需兼容老环境或含函数/undefined/Symbol → 引入 lodash.cloneDeep()。注意它会将 Date、RegExp 转为普通对象，若业务强依赖其原型方法（如 date.toISOString()），需额外处理
• 结构简单且确定无 Date/Function/undefined → JSON.parse(JSON.stringify(obj)) 可作为轻量 fallback，但务必加 try-catch 并校验结果，避免因 NaN、循环引用等静默失败

在组件设计阶段主动规避

比修复 Bug 更有效的是预防：

• 接收外部数据时，**立即做一次安全拷贝**，而非等到修改前才处理。例如 React 中：useEffect(() => { setLocalConfig(structuredClone(props.config)); }, [props.config])
• 对外暴露的数据方法（如 hooks 返回的 update 函数），内部应确保操作的是副本。避免返回 state.items.map(...) 后直接赋值给原始数组引用
• 微前端通信中，主应用向子应用发送配置，建议用 structuredClone 包裹后再 postMessage；子应用接收后也应 clone 一份再存入 local state
• 对不可变性有强要求的项目，可配合 Immer（produce）封装写操作，既保持语义清晰，又由库自动处理引用隔离