vue克隆响应式数据需先解包再拷贝：用toraw()或unref()提取原始值，再依场景选json.parse(json.stringify())、structuredclone()或lodash.clonedeep，避免直接拷贝proxy对象。
Vue 中克隆响应式数据，核心不是“怎么复制”，而是“复制后是否可用”——既要切断引用污染，又要按需保留响应性。直接赋值或展开运算符是浅拷贝，改一个就动两个；而盲目用 JSON 或第三方库深拷贝，又容易踩中 Proxy 报错、特殊类型丢失、循环引用崩溃等坑。
先解包，再拷贝：绕过响应式陷阱
Vue 的 reactive 对象是 Proxy 实例，ref 是带 .value 的包装器，它们都不能被直接序列化或递归遍历。
- 对
reactive对象，必须先用toRaw()提取原始对象 - 对
ref，要先取ref.value，再处理其内部值 - 不确定类型时，可用
unref(obj)+toRaw()组合安全提取（unref自动处理 ref/reactive/普通值）
按场景选拷贝方式：没有万能方案
拷贝方法不是越重越好，关键看你的数据结构和后续用途。
-
只要干净数据，不要响应式（如表单备份、导出原始值、diff 比对）：用
JSON.parse(JSON.stringify(toRaw(obj)))——快、轻、无依赖，但不支持Date、RegExp、undefined、函数、Symbol和循环引用 -
既要干净，又要响应式（如弹窗复用模板、新建编辑实例）：先深拷贝原始值，再用
reactive()或ref()包一层，例如：const clone = reactive(structuredClone(toRaw(original))) -
含 Map/Set/Date/循环引用的复杂结构：推荐
structuredClone(toRaw(obj))（现代浏览器原生支持，比 JSON 更健壮），或引入lodash.cloneDeep（兼容老环境、类型支持最全）
避免常见错误操作
这些写法看似简洁，实际会出问题：
- ❌
structuredClone(original)—— 直接传 reactive 对象，会报 “TypeError: Cannot structuredClone a Proxy object” - ❌
JSON.parse(JSON.stringify(original))—— 同样因 Proxy 报错，或静默丢失属性 - ❌
const copy = { ...original }或Array.from(original)—— 浅拷贝，嵌套对象仍共享引用 - ❌ 克隆后不重置 ID、key、时间戳等唯一字段 —— 导致列表渲染 key 冲突或状态覆盖
进阶建议：结合业务做轻量定制
纯工具拷贝解决不了所有问题。真实项目中建议：
- 对动态表单、树形结构等，优先用
shallowReactive控制代理深度，减少拷贝压力 - 克隆后主动重置关键字段（如
id、createdAt、__v等），比完全深拷贝更可控 - 高频克隆场景（如撤销重做），可预生成不可变快照，用
fast-copy替代lodash提升性能 - Map/Set 类型需显式调用
.entries()或.values()转为数组再拷贝，不能直接 JSON 序列化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
