安全克隆响应式对象需三步：先用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
