Vue响应式数据克隆需先脱敏：reactive用toRaw()、ref用.value，再按需深克隆；常用JSON法（快但限类型），复杂结构用lodash.cloneDeep；避免浅拷贝污染，重置初始值更高效。
Vue 中的响应式数据（如 reactive 或 ref 创建的对象）本质是带 Proxy 的包装对象，直接赋值或展开运算符只会复制引用，导致修改克隆体时原数据也被改——这就是“相互污染”。深克隆的目标是：**生成一份内存独立、结构完整、且按需保留响应性的副本**。关键不在“能不能克隆”，而在“克隆后要不要响应式”以及“数据是否干净”。
先明确：克隆前要“脱敏”响应式包装
Vue 的 reactive 对象不能直接传给 JSON.stringify，会报错或丢失属性；ref 也要先取 .value。否则克隆过程会失败或不完整。
- 对
reactive对象：先用toRaw()获取原始对象再克隆 - 对
ref对象：先解包ref.value，再处理其值 - 若不确定类型，可统一用
unref()+toRaw()组合安全提取
三种典型场景及对应克隆策略
场景一：只要数据干净，不要响应式（最常用）
比如表单编辑前备份、保存前比对差异、导出原始数据等。
- 首选
JSON.parse(JSON.stringify(toRaw(obj)))—— 简单、快、无依赖 - 注意限制：不支持
Date、RegExp、undefined、function、Symbol和循环引用 - 如有特殊类型，改用轻量递归函数，或引入
lodash.cloneDeep
场景二：既要干净，又要响应式
比如弹窗复用同一份 reactive 模板，每次打开都需全新可响应实例。
- 分两步：先深克隆原始数据 → 再用
reactive()或ref()包装 - 示例：
const clone = reactive(JSON.parse(JSON.stringify(toRaw(original)))) - 避免直接对
reactive做JSON操作，否则报错
场景三：复杂结构（含 Map/Set/Date/循环引用）
画布节点、配置树、带时间戳的状态快照等。
- 手写递归需处理类型判断（
Object.prototype.toString.call()）、特殊构造（new Date()、new RegExp()）、循环引用缓存（WeakMap） - 推荐直接使用
lodash.cloneDeep，它已覆盖全部边界情况 - Vue 官方不反对第三方工具，尤其在业务逻辑层
避坑重点：这些操作看似克隆，实则仍在共享
以下写法都只是浅拷贝，极易引发污染：
-
const copy = original—— 完全同引用 -
const copy = { ...original }或[...originalArray]—— 仅第一层解构，嵌套对象仍共用 -
Object.assign({}, original)—— 同样只浅拷贝，original.nested.obj改动会影响copy.nested.obj -
JSON.parse(JSON.stringify(ref))忘记先取ref.value或没用toRaw—— 报错或返回空对象
小技巧：重置响应式数据比克隆更高效
很多场景其实不需要“克隆+赋值”，而是“恢复初始值”。比起每次深克隆，更推荐：
- 定义初始化函数：
const createInit = () => ({ name: '', list: [] }) - 用
reactive(createInit())创建状态 - 重置时调用：
Object.assign(state, createInit()) - 优势：避免序列化开销，天然支持任意数据类型，逻辑清晰不易出错
