toRaw 是 Vue 3 中用于安全获取响应式对象原始底层对象的工具函数。它仅解一层代理，不解除响应性，适用于第三方库兼容、深度比较及调试等场景，但修改其返回值不会触发视图更新。
toRaw 是 Vue 3 提供的一个工具函数，用于从响应式代理对象（如 reactive()、ref() 包裹的对象）中**安全地获取其原始的、非响应式的底层对象**。它不解除响应性，也不修改原对象，只是“穿透”代理层，返回被代理的目标本身。
什么时候需要用 toRaw？
常见于以下场景：
- 需要将响应式对象传给外部第三方库（如 Chart.js、MapLibre），而这些库可能因 Proxy 代理行为报错或表现异常；
- 做深度对象比较（如用
JSON.stringify或lodash.isEqual），避免 Proxy 的不可枚举属性或 getter 干扰； - 在某些边界情况（如序列化、调试打印、服务端渲染）中，想绕过响应式系统直接操作原始数据。
基本用法：配合 reactive 使用
如果你用 reactive() 创建了一个响应式对象，可以直接传给 toRaw()：
vercel-react-best-practices
下载
来自 Vercel Engineering 的 React 和 Next.js 性能优化指南。用于编写、审查或重构 React/Next.js 代码以确保最佳性
import { reactive, toRaw } from 'vue'
const state = reactive({
name: 'Alice',
profile: {
age: 30,
city: 'Beijing'
}
})
console.log(state) // Proxy { ... }
console.log(toRaw(state)) // { name: 'Alice', profile: { age: 30, city: 'Beijing' } }
console.log(toRaw(state) === state) // false（不是同一个引用）
console.log(toRaw(state).profile === state.profile) // true（嵌套对象默认仍是响应式，除非也用 toRaw 处理）
注意嵌套对象和 ref 的处理
toRaw() 只解一层代理。对嵌套的响应式对象（如 state.profile）仍返回 Proxy，需再次调用：
-
toRaw(state.profile)→ 获取profile的原始对象； - 对
ref对象，要先取.value再用toRaw：const r = ref(reactive({ x: 1 }))→toRaw(r.value)才能得到原始对象； - 如果
ref指向的是普通值（如ref(42)），toRaw(r)无意义（它本来就没有代理），返回值就是r本身（Vue 内部会自动降级处理）。
不推荐滥用 toRaw
toRaw 是逃生舱口（escape hatch），不是常规开发手段：
- 用
toRaw修改原始对象，**不会触发视图更新**（因为已脱离响应式系统）； - 修改
toRaw(obj)返回的对象，原obj的响应式状态不受影响，但若该对象后续又被 Vue 读取（比如重新赋值回响应式字段），可能引发不一致； - 优先考虑用
markRaw()避免对象被转为响应式，比事后用toRaw更清晰、更安全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
