安全克隆 Vue 3 中 ref 的深层嵌套对象需先取 value 值、再深拷贝（如 structuredClone）、最后按需用 ref() 或 reactive() 重建响应式；不可直接克隆 ref 本身或忽略数据可序列化性。
要安全克隆 Vue 3 中 ref 包裹的深层嵌套响应式对象，核心是：先取值、再深拷贝、最后按需重建响应式。直接对 ref 对象本身调用克隆方法（如 structuredClone 或 JSON.parse(JSON.stringify())）会失败或丢失数据，因为 ref 是一个带 value 属性的 Proxy 对象，不是原始数据。
✅ 正确步骤：解包 → 拷贝 → 重包
必须先访问 .value 获取原始数据，再对这个原始值做深拷贝；若需拷贝后仍保持响应式，最后再用 ref() 或 reactive() 封装。
-
获取原始数据：
const raw = myRef.value（注意：若myRef是嵌套结构，raw仍是普通 JS 对象/数组，不含响应式代理） -
执行深拷贝：
- 现代浏览器推荐：
structuredClone(raw)（快、原生、支持 Map/Set/Date 等，但不支持函数、Symbol、循环引用） - 兼容性要求高或需函数支持：
JSON.parse(JSON.stringify(raw))（简单有效，但丢函数、undefined、RegExp、Date 等） - 生产级健壮方案：
cloneDeep(raw)（来自 lodash-es，支持全类型，含循环引用、函数、正则等）
- 现代浏览器推荐：
-
重建响应式（按需）：
- 若只需普通副本（如用于表单暂存、比对、提交）：直接使用拷贝结果，无需再 ref
- 若需新响应式引用：
const clonedRef = ref(clonedData) - 若需 reactive 形式：
const clonedReactive = reactive(clonedData)
⚠️ 特别注意 ref 的嵌套结构
当 ref 包裹的是一个对象（比如 ref({ user: { profile: { name: 'A' } } })），它的 .value 是一个普通对象，但其内部属性**本身不自动响应式**——响应式能力来自外层 ref 的代理机制。所以拷贝时只需处理 .value 这一层原始数据，无需 toRaw（那是给 reactive 用的）。
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- ❌ 错误写法：
structuredClone(myRef)→ 报错（Proxy 不可克隆） - ❌ 错误写法：
structuredClone(myRef.value)前未确认myRef.value是否为可序列化对象（如含函数或 undefined 属性，可能被丢） - ✅ 安全写法：
const cloned = structuredClone(toRaw(myRef.value) ?? myRef.value)—— 仅在你不确定是否混入了 reactive 子项时加toRaw，一般纯ref不需要
? 实用示例：编辑前备份 + 取消还原
常见于弹窗编辑场景：
立即学习“前端免费学习笔记（深入）”；
const originalRef = ref({ id: 1, info: { title: 'Vue', tags: ['3', 'ts'] }, meta: null });
const editRef = ref({}); // 编辑用副本
// 打开弹窗时安全克隆
const openEdit = () => {
const raw = originalRef.value;
const backup = structuredClone(raw); // ✅ 拷贝原始值
editRef.value = backup; // ✅ 赋值给另一个 ref（自动触发响应式更新）
};
// 取消编辑，还原原始状态
const cancelEdit = () => {
originalRef.value = structuredClone(editRef.value); // ✅ 可逆操作
};
? 补充：什么时候用 toRaw？
toRaw 主要用于 reactive 或嵌套了 reactive 的结构。如果 ref 的 .value 里还包含 reactive 对象（极少见，通常不推荐），才需要先 toRaw 再克隆。绝大多数业务中，ref 的 .value 就是干净的 plain object/array，直接克隆即可。
