Vue3响应式数据深拷贝应优先用structuredClone(toRaw(obj))，它支持Map/Set/Date/RegExp等且解决循环引用；老环境可手动递归实现，关键要toRaw解包、WeakMap防循环、类型特判；核心是隔离变更而非单纯拷贝。
Vue3 的响应式数据不能直接用 JSON.parse(JSON.stringify()) 深拷贝，因为会丢失响应式代理、函数、undefined、Symbol、Date、RegExp 等类型，还会报错循环引用。真正安全的深拷贝，得结合数据类型、是否保留响应式、以及实际使用场景来选方案。
用 structuredClone 快速拷贝（推荐用于普通对象/数组）
现代浏览器（Chrome 98+、Firefox 94+、Safari 15.4+）已原生支持 structuredClone，它能正确处理 Map、Set、Date、RegExp、ArrayBuffer 及嵌套结构，且不丢失值类型，也支持循环引用。
示例：
const original = reactive({
name: 'Alice',
info: { age: 30, tags: ['vue', 'ts'] },
created: new Date(),
flags: new Set(['active'])
});
// ✅ 安全深拷贝（非响应式）
const cloned = structuredClone(original);
// ❌ 不要对 reactive 对象直接 structuredClone —— 会抛错（Proxy 不可克隆）
// 正确做法：先 toRaw，再克隆
const raw = toRaw(original);
const safeCloned = structuredClone(raw);
注意：structuredClone 不保留 Vue 响应式，返回的是普通 JS 对象；若需拷贝后仍响应式，需再套一层 reactive()。
手动递归 + 类型判断（兼容老环境或需定制逻辑）
当项目需兼容低版本浏览器，或需要控制某些字段不拷贝、替换特定值、跳过 Symbol 键等，可封装轻量递归深拷贝函数，并避开 Proxy 对象（如 toRaw 后再操作）。
关键点：
- 遇到
ref/reactive代理对象，先用toRaw()解包 - 跳过函数、undefined、Symbol（JSON 方法本身就不支持，手动实现也要明确策略）
- 单独处理 Date、RegExp、Map、Set 等内置对象
- 用 WeakMap 缓存已遍历对象，解决循环引用
简化版示例（仅示意逻辑）：
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
function deepClone(obj, cache = new WeakMap()) {
if (obj === null || typeof obj !== 'object') return obj;
// 处理 Proxy（Vue 响应式对象）
if (isReactive(obj) || isRef(obj)) {
obj = toRaw(obj);
}
if (cache.has(obj)) return cache.get(obj);
let result;
if (obj instanceof Date) result = new Date(obj);
else if (obj instanceof RegExp) result = new RegExp(obj);
else if (obj instanceof Map) {
result = new Map();
obj.forEach((v, k) => result.set(deepClone(k, cache), deepClone(v, cache)));
} else if (obj instanceof Set) {
result = new Set();
obj.forEach(v => result.add(deepClone(v, cache)));
} else {
result = Array.isArray(obj) ? [] : {};
cache.set(obj, result);
for (const key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
result[key] = deepClone(obj[key], cache);
}
}
}
return result;
}
避免污染：响应式数据别直接赋值引用
很多“数据污染”其实不是拷贝问题，而是误把响应式对象直接赋给了另一个响应式变量，导致双向绑定意外联动。例如：
// ❌ 危险！a 和 b 指向同一 reactive 对象
const a = reactive({ count: 1 });
const b = a; // b 不是副本，是别名
b.count = 99;
console.log(a.count); // 99 → 已被改写
正确做法：
- 需要独立副本 → 先深拷贝（
structuredClone(toRaw(a))），再reactive() - 仅读取或临时计算 → 用
toRaw()或unref()避免触发依赖收集 - 表单编辑场景 → 推荐用
toRefs()+ 解构 + 独立 ref 维护编辑态，提交时再合并
Pinia store 数据怎么安全拷贝？
PINIA 的 store.$state 是响应式对象，直接赋值会污染原始状态。安全做法：
- 只读快照：用
toRaw(store.$state)获取原始数据，再用structuredClone拷贝 - 编辑副本：在组件内用
ref(structuredClone(toRaw(store.$state)))创建独立 ref，提交时调用store.$patch()或重置整个 state - 避免
const edit = store这类浅赋值 —— 它等于在操作原始 store
示例：
const store = useUserStore();
const editForm = ref(structuredClone(toRaw(store.$state)));
// 提交时
function onSubmit() {
store.$patch({ ...editForm.value });
}
不复杂但容易忽略：深拷贝不是目的，隔离数据变更才是核心。优先用 toRaw + structuredClone，老环境补递归方案，关键是在赋值前想清楚——这里要的是副本，还是别名？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
