toRaw 是 Vue 3 中用于安全获取响应式对象原始值的工具函数，返回被代理前的普通 JavaScript 对象或原始值，不解除响应性，仅穿透代理层。
toRaw 是 Vue 3 Composition API 中用于**安全地获取响应式对象（ref、reactive、readonly 等）背后原始普通 JavaScript 对象**的工具函数。它不解除响应性，只是“穿透”响应式代理，返回被代理前的原始值。
什么时候需要用 toRaw？
常见于以下场景：
- 需要将响应式对象传给**外部非 Vue 库**（如 Chart.js、Three.js、Axios 请求体），这些库可能因 Proxy 代理而报错或行为异常；
- 做深度相等比较（
JSON.stringify或lodash.isEqual）时，避免 Proxy 干扰； - 调试时想看“真实数据结构”，绕过 Vue 的响应式包装；
- 手动调用某些只接受 plain object 的 API（如
Object.assign、structuredClone）。
基本用法：传入响应式对象，返回原始对象
注意：toRaw 只对由 Vue 创建的响应式对象有效（reactive()、ref()、readonly() 等），对普通对象、数组、原始值直接返回自身。
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）
console.log(toRaw({ a: 1 })) // { a: 1 } ← 普通对象原样返回
重要注意事项
- toRaw 返回的对象不是响应式的：修改它不会触发视图更新，也不会被 Vue 追踪；
-
不能用于替代
unref或toRefs：它不处理 ref 解包逻辑（toRaw(refObj)返回的是refObj.value，不是refObj本身）； -
嵌套响应式对象仍保持代理：如果原始对象内部有 reactive 子属性，
toRaw只解一层，子属性仍是响应式代理（需递归调用或配合unref处理）； - 不要在模板或 computed 中滥用：这会绕过响应式系统，可能导致状态不同步；仅在必要且明确知道后果时使用。
实用小技巧：安全导出为 plain object
若需完整剥离所有层级的响应性（例如深拷贝发送 API），推荐组合使用：
import { toRaw } from 'vue'
import { cloneDeep } from 'lodash-es'
// 方案一：先 toRaw，再深克隆（推荐）
const plainData = cloneDeep(toRaw(state))
// 方案二：手动递归（简单结构可用）
function toPlain(obj) {
if (obj && typeof obj === 'object') {
const raw = toRaw(obj)
if (Array.isArray(raw)) {
return raw.map(toPlain)
} else if (raw !== null && typeof raw === 'object') {
const result = {}
for (const key in raw) {
result[key] = toPlain(raw[key])
}
return result
}
}
return obj
}
toRaw 不复杂但容易忽略——它不是“取消响应式”，而是“取原始快照”。用对地方，能帮你避开不少和第三方库集成的坑。
