toRaw 是 Vue 3 提供的工具函数，用于安全获取 reactive、readonly、ref（包装响应式对象时）等代理背后的原始普通对象，适用于传第三方库、JSON 序列化、避免响应式追踪等场景，但修改其返回值仍会触发更新。
toRaw 是 Vue 3 提供的一个工具函数，用于从 reactive、readonly、ref（包装了 reactive 对象时）等响应式代理中，**安全地获取其底层原始对象**。它不解除响应式，也不修改代理行为，只是“穿透”代理层拿到被代理的原始数据。
什么时候需要用 toRaw？
当你需要对 reactive 对象执行一些**不希望触发响应式追踪或更新**的操作时，比如：
- 将对象传给第三方库（如 Chart.js、Lodash 深拷贝、JSON 序列化前校验结构）；
- 与非响应式逻辑（如某些 DOM 操作、Canvas 绘图数据）交互；
- 避免在
JSON.stringify或console.log中看到 Proxy 内部结构（虽然现代控制台已优化，但仍有兼容性场景）； - 手动进行深度比较（对比原始值而非代理引用）。
基本用法：从 reactive 获取原始对象
直接把 reactive 创建的对象传给 toRaw 即可：
import { reactive, toRaw } from 'vue'
const state = reactive({
count: 0,
user: { name: 'Alice', age: 30 }
})
// 获取原始普通对象（非 Proxy）
const rawState = toRaw(state)
console.log(rawState === state) // false（是不同引用）
console.log(rawState.count) // 0
console.log(rawState.user.name) // 'Alice'
console.log(rawState.user === state.user) // false（内部嵌套对象也被解包）
注意：toRaw 不递归“扁平化”，但会解包所有响应式层级
toRaw 会递归解包 reactive/readonly/ref 包裹的嵌套对象（只要它们是 Vue 创建的响应式代理），但不会把 Date、Map、Set、class 实例等转成 plain object —— 它只移除 Vue 的 Proxy 封装，保留原始类型和结构：
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
const nested = reactive({
profile: reactive({ avatar: '/img.png' }),
settings: readonly({ theme: 'dark' }),
list: ref([1, 2, 3])
})
const raw = toRaw(nested)
// ✅ raw.profile 是普通对象（不是 Proxy）
// ✅ raw.settings 是普通对象（不是 readonly 代理）
// ✅ raw.list 是数组 [1, 2, 3]（ref.value 被取出并解包）
⚠️ 但它不会把 raw.profile 变成 JSON-like 纯字面量（比如不会处理 Date 或自定义 class），也不会做深克隆 —— 这仍是同一个内存中的原始对象，修改 raw 仍会影响 state（因为没脱离响应式系统）。
慎用场景：不要用 toRaw 绕过响应式更新
以下做法是错误的：
// ❌ 错误：以为改 raw 就不触发更新 —— 实际上依然会！ const raw = toRaw(state) raw.count = 100 // ✅ 这会同步触发视图更新（因为还是同一个响应式源） // ❌ 更危险：对 raw 做深拷贝再赋值，可能丢失响应性 state.user = JSON.parse(JSON.stringify(toRaw(state.user))) // user 变成普通对象，失去响应式
✅ 正确方式始终是通过 state.xxx = newValue 更新，让 Vue 追踪变更。
toRaw 是一个“读取辅助”工具，不是“脱敏出口”。它的价值在于安全接入外部系统，而不是替代响应式更新逻辑。
