toRaw 是 Vue 3 用于获取响应式对象原始底层值的函数，不解除响应式；适用于 JSON 序列化、第三方库交互、深度比较等场景，对 ref 返回其 value 值，修改返回值不会触发更新。
toRaw 是 Vue 3 提供的一个实用函数，用于获取由 reactive、readonly、ref（包括 shallowRef）等响应式 API 包装后的**原始底层对象**。它不解除响应式，只是“穿透”代理层，拿到最原始的值。
什么时候需要 toRaw？
常见于以下场景：
- 需要对响应式对象执行某些第三方库操作（如 JSON 序列化、结构克隆、与非 Vue 环境交互），而这些操作被 Proxy 代理干扰（比如
JSON.stringify对 proxy 返回空对象）； - 想绕过响应式系统做一次性深度比较或手动赋值（注意：修改 toRaw 返回的对象 不会触发视图更新）；
- 调试时快速查看未被代理包装的原始数据结构。
基本用法示例
导入并调用即可：
import { reactive, ref, toRaw } from 'vue'
const state = reactive({ count: 1, name: 'Vue' })
const countRef = ref(42)
console.log(toRaw(state)) // { count: 1, name: 'Vue' }
console.log(toRaw(countRef)) // 42（ref 的 .value 值）
注意：toRaw 对普通对象、数组、原始值（字符串/数字）直接返回自身，安全无副作用。
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
立即学习“前端免费学习笔记（深入）”；
对 ref 的特殊说明
toRaw(ref) 返回的是 ref.value 的原始值，不是 ref 对象本身：
-
toRaw(ref({ a: 1 }))→{ a: 1 }（解包 + 取原始） -
toRaw(shallowRef({ a: 1 }))→{ a: 1 }（同上） -
toRaw(ref(100))→100（原始数字）
它不会返回 { value: ... } 结构 —— 那是 ref 对象的形态，toRaw 目标是“底层数据”，不是 ref 容器。
重要限制和注意事项
- 不可逆向使用：toRaw 返回的对象不具有响应性，修改它不会触发更新；
- 不推荐在模板或计算属性中频繁使用，会破坏响应式依赖追踪；
-
嵌套响应式对象仍保持代理：若 reactive 对象内部还有 reactive 属性，
toRaw只解一层，需递归调用（但通常没必要）； -
仅限开发/集成场景，日常响应式操作应优先使用
.value、unref或toRefs等标准方式。
