toRaw 是 Vue 3 用于获取 reactive 等创建的响应式代理对应的原始对象的工具函数，仅对响应式代理有效，不可用于 ref；适用于第三方库兼容、可靠 JSON 序列化、原始引用对比等场景，但直接修改其返回值不会触发视图更新。
toRaw 是 Vue 3 提供的一个工具函数，用于**获取由 reactive（或 readonly、shallowReactive 等）创建的响应式代理对象所对应的原始 JavaScript 对象**。它不适用于 ref，只对响应式代理有效。
什么时候需要 toRaw？
当你需要绕过响应式系统、直接操作原始数据时，比如：
- 将响应式对象传给第三方库（如 Chart.js、Mapbox），这些库可能因 Proxy 而报错或行为异常；
- 做深度 JSON 序列化（
JSON.stringify(proxy)可能失败或丢失数据，而JSON.stringify(toRaw(proxy))更可靠）； - 手动对比两个响应式对象是否引用同一原始对象（
toRaw(a) === toRaw(b)）； - 在某些边界场景下避免触发不必要的响应式副作用（需谨慎，通常不推荐随意脱离响应式）。
基本用法示例
直接传入一个 reactive 对象即可：
```js
import { reactive, toRaw } from 'vue'
const state = reactive({
count: 1,
user: { name: 'Alice' }
})
console.log(toRaw(state)) // { count: 1, user: { name: 'Alice' } }
console.log(toRaw(state) === state) // false（是不同引用）
```
立即学习“前端免费学习笔记（深入）”；
注意事项和常见误区
-
toRaw 对普通对象、ref、computed 无效：传入非响应式代理会原样返回；传入
ref返回的是 ref 对象本身（不是其.value），如需原始值应先解包； -
嵌套对象也需单独 toRaw：如果
state.user是 reactive 的，toRaw(state).user仍是代理，要写成toRaw(state.user)才能得到原始 user； -
不要用 toRaw 修改原始对象来“更新”视图：直接改
toRaw(state).count = 2不会触发响应式更新，视图不会变化； - 服务端渲染（SSR）中慎用：toRaw 在 SSR 中可能返回 undefined 或行为不一致，建议仅在客户端逻辑中使用。
替代方案思考
多数情况下，你并不需要 toRaw：
- 想安全序列化？优先用
JSON.stringify(plainObject)—— 如果数据来自 API，尽量保持原始结构； - 想传给第三方库？很多现代库已支持 Proxy，可先测试是否真出问题；
- 想跳过响应式？考虑用
shallowRef或markRaw（用于标记对象不转为响应式）更合适。
