Vue中深拷贝关键在“安全可用”：先用toRaw或.value解包响应式对象，再用structuredClone、lodash.cloneDeep或fast-copy深拷贝，最后按需用ref/reactive重新包装以恢复响应式。
Vue 中处理复杂对象的深复制，关键不在“能不能复制”，而在于“复制后是否安全可用”——既要避开响应式陷阱，又要兼顾数据完整性与性能。
响应式对象不能直接深拷贝
Vue 的 ref 或 reactive 包裹的对象，其内部属性是通过 Proxy 或 defineProperty 动态追踪的。直接用 JSON.parse(JSON.stringify()) 或普通递归函数复制，会丢失响应性，得到一个纯静态对象；而若在复制过程中意外修改了原始响应式对象的嵌套属性，还可能触发不必要的更新或警告。
稳妥做法是：先解包取值，再深拷贝，最后按需重新包装。
- 对
ref：用ref.value获取原始值后再拷贝 - 对
reactive：可直接传入对象（但注意不要传入已 reactive 的代理） - 拷贝完成后，如需响应式，再用
ref()或reactive()包一层
三种主流深拷贝方式怎么选
没有银弹，选法取决于你的数据特征和项目约束：
立即学习“前端免费学习笔记（深入）”；
-
JSON 方法：适合表单数据、配置项等纯 JSON 友好型结构（无函数、无 Date、无 undefined、无循环引用）。写法最轻：
JSON.parse(JSON.stringify(obj)) -
Lodash
_.cloneDeep：适合中大型项目，尤其含正则、Date、Map/Set、类实例等复杂类型。需安装依赖，但稳定可靠，社区验证充分 -
fast-copy 库：比 Lodash 更快，专为性能敏感场景优化（如高频状态快照、撤销重做），支持 Symbol 和循环引用，API 极简：
import copy from 'fast-copy'; const clone = copy(obj)
真实场景中的避坑要点
深拷贝不是复制完就万事大吉，这些细节常被忽略：
- 复制后别直接赋给
reactive原始引用——这会破坏响应式链路，应替换整个 ref 或重新赋值给 reactive 对象的顶层字段 - 表单重置时，保存初始值要用深拷贝，否则 reset 时修改的是同一份内存，导致后续 reset 失效
- 嵌套组件间传递响应式对象并需要本地编辑？推荐在子组件内用
toRaw解除响应式再深拷贝，避免副作用 - 如果对象含
undefined或函数且必须保留，JSON 方法失效，必须换 Lodash 或 fast-copy
一个实用的封装建议
不必每次手动判断，可以封装一个带类型提示的安全深拷贝工具：
```jsimport { isRef, unref } from 'vue'
import copy from 'fast-copy'
export function safeDeepClone
if (isRef(source)) {
return copy(unref(source)) as T
}
return copy(source)
}
调用时自动适配 ref / 普通对象，语义清晰，不易出错。
