深拷贝是隔离组件状态的必要手段，因浅拷贝仅复制第一层引用，嵌套对象仍共享内存；推荐 structuredclone()（现代浏览器）、json.parse(json.stringify())（兼容性好但丢数据）、lodash clonedeep（最全面）或手动递归（定制化强）。
直接赋值或浅拷贝对象，只会复制引用，多个组件依然共用同一份内存数据。要真正隔离状态，必须让每个组件拥有完全独立的数据副本——也就是深拷贝。
为什么浅拷贝不行
展开运算符 {...obj}、Object.assign 或数组的 slice()、[...arr] 都只处理第一层。一旦对象里有嵌套对象、数组或日期等引用类型，副本和原对象仍指向同一块内存。
- 修改
copy.nested.value，original.nested.value也会变 - 表单、树形结构、配置项等多层嵌套场景下，极易引发意外联动
- 在 React 或 Vue 中，这会导致子组件响应错误状态，甚至触发不必要的重渲染
推荐的深拷贝方式
选哪种方法，取决于你的运行环境、数据结构复杂度和兼容性要求：
-
structuredClone()：现代浏览器首选（Chrome 98+、Firefox 94+、Safari 15.4+）。支持 Map、Set、Date、RegExp、嵌套对象/数组，还能处理简单循环引用，且不破坏原型链。写法极简：
const isolated = structuredClone(props.data) - JSON.parse(JSON.stringify())：兼容性最好，所有浏览器都支持。但会丢掉函数、undefined、Symbol、BigInt、正则、日期对象（转成字符串）、Map/Set，也无法处理循环引用。适合纯 JSON 数据的初始化场景
- Lodash cloneDeep：最稳妥的通用方案。能正确处理 Date、RegExp、自定义类、函数（保留但不执行）、循环引用等。缺点是引入额外包体积，适合中大型项目
- 手动递归拷贝：当数据结构固定且特殊（比如只深拷贝某几层，或需跳过某些字段），可定制逻辑，控制粒度更细
实际使用中的关键细节
深拷贝不是“用了就行”，几个容易踩坑的地方要注意：
- 避免在 render 函数或高频事件中反复调用——大数据量时性能明显下降。可用 useMemo 缓存拷贝结果，或提前在 props 传入时就完成拷贝
- 不要混淆“初始化拷贝”和“运行时更新”。组件挂载时用深拷贝隔离初始状态；后续更新应基于当前本地状态做 immutable 更新，而非反复深拷原始 props
- 可在 useEffect 里加个简单校验：修改副本后打印原始 props 对应字段，确认没被意外改写，快速定位共享引用问题
什么时候可以不用深拷贝
并非所有场景都需要深拷贝：
- 状态是扁平结构（只有字符串、数字、布尔值），浅拷贝足够安全
- 组件只读展示数据，不修改，无需隔离
- 使用状态管理库（如 Zustand、Pinia）配合 immer，内部已自动处理不可变更新，不必手动深拷贝
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
