安全克隆响应式对象需三步：先用toraw或unref递归解包proxy层，再用structuredclone或自定义递归函数拷贝纯数据，最后按需用reactive或ref重包；传输前应确保输出为无proxy的plain object/array。

直接对 reactive 或嵌套 ref 对象调用深拷贝方法会失败，因为 Proxy 代理不可序列化、不可递归遍历。安全克隆的关键是先“解包”响应式层，再“拷贝”纯数据，最后按需“重包”。

先解包：剥离响应式代理

不能跳过这步——否则任何拷贝都会卡在 Proxy 上。

• 对 reactive({ a: 1, profile: reactive({}) })，用 toRaw(obj) 得到普通对象，但注意它只解最外层，profile 仍是 Proxy，需递归处理或配合后续步骤
• 对 ref({ x: 2 })，取 myRef.value 获取原始对象；若为 computed(() => ...) 或 readonly(...)，也需先用 unref() 或 toRaw() 提取底层值
• 避免对已解包的对象再次调用 toRaw，比如 toRaw(toRaw(obj)) 无意义且可能出错

再拷贝：选合适方式还原纯数据

解包后得到的是普通 JS 数据，此时才进入真正拷贝环节。

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

• 现代环境（Chrome 94+/Edge 94+/Firefox 91+/Node.js 17+）推荐：structuredClone(toRaw(obj))。它自动跳过函数、undefined、Symbol、循环引用，不因 getter 报错，比手写更稳
• 需兼容旧环境或定制逻辑（如过滤某些字段、替换日期格式）：封装轻量递归函数，内部对每个属性先 toRaw 或 unref，再判断类型分别处理（Object/Array/Date/Map/Set 等）
• 慎用 JSON.parse(JSON.stringify())：会丢失 Date（变字符串）、RegExp（变空对象）、undefined（被忽略）、function（消失），仅适合结构简单、纯 JSON 友好型数据

后重包：按需恢复响应式（可选）

如果克隆结果后续还要参与 Vue 响应式更新，才需要这步；仅用于传输或临时计算则跳过。

• 把 structuredClone(toRaw(obj)) 的结果传给 reactive()，得到新响应式对象
• 对单个值（如 ref(42) 的克隆结果 42），可用 ref(42) 重新包装
• 注意：不要对克隆后的普通对象再调用 toRaw，它已无代理层，调用无效

实际传输前的统一处理建议

常用于 axios 请求、localStorage 存储或跨组件传递时，可封装一个 serialize 工具函数：

• 对 ref 类型，返回 .value（并递归处理其内容）
• 对 reactive 或 computed，统一走 toRaw + structuredClone
• 对含 Map/Set/Date 的复杂结构，优先用 structuredClone，它原生支持这些类型
• 最终输出一定是无 Proxy、无 getter、无隐藏属性的 Plain Object / Array，可放心 JSON.stringify

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！