toRaw()用于从Vue 3响应式代理中获取原始对象，解决第三方库因Proxy拦截导致的兼容性问题，如属性读取失败、初始化异常或JSON序列化为空；它仅对reactive/ref创建的对象有效，返回值无响应性。
在 Vue 3 中，toRaw() 是一个实用的工具函数，专门用于从响应式代理（Proxy）中获取原始对象。它最典型的使用场景，就是让 Vue 的响应式数据能被不支持 Proxy 的第三方库（比如某些图表库、富文本编辑器、旧版 UI 组件等）正常处理。
为什么第三方库常和响应式对象“打架”？
Vue 3 默认用 Proxy 包裹对象实现响应式，这会让对象变成一个“代理实例”，而非普通 JS 对象。很多老库或底层操作依赖 Object.prototype 方法（如 hasOwnProperty、toString）、直接访问 constructor、遍历 for...in、或检查 instanceof，而这些在 Proxy 上行为可能异常或被拦截。
常见报错包括：
- “Cannot read property 'x' of undefined”（实际字段存在，但 Proxy 拦截了读取）
- 图表库初始化失败，提示“data is not plain object”
- JSON 序列化后为空对象
{}（Proxy 不可直接 JSON.stringify） - 富文本编辑器无法识别 content 字段结构
toRaw 的正确用法和注意事项
toRaw() 只对由 reactive()、ref()（解包后）、shallowReactive() 创建的响应式对象有效，对普通对象调用会原样返回。
立即学习“前端免费学习笔记（深入）”；
典型写法：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
import { reactive, toRaw } from 'vue'
const state = reactive({ count: 0, list: [1, 2, 3] })
// ✅ 正确：传给需要原始对象的第三方方法
chartInstance.setOption({
series: [{ data: toRaw(state.list) }]
})
// ❌ 错误：直接传响应式数组，可能被拦截或失真
// chartInstance.setOption({ series: [{ data: state.list }] })
注意：
-
toRaw()返回的是原始对象，不再具备响应性 —— 修改它不会触发视图更新 - 不要用
toRaw()替代响应式更新逻辑；它只用于“输出兼容”，不用于“数据操作” - 嵌套响应式对象需逐层调用：
toRaw(toRaw(state.nested).items)，或用unref()+toRaw()处理 ref
替代方案对比：markRaw vs toRaw
markRaw() 和 toRaw() 常被混淆，但作用相反：
-
markRaw(obj)：标记一个对象“永远不转为响应式”，适合传入第三方库创建的实例（如new Chart()），避免被 Vue 自动代理 -
toRaw(proxy)：把已有的响应式代理“还原”成原始对象，适合把 Vue 数据喂给外部库
两者配合使用很常见：先 markRaw 第三方实例防止被劫持，再用 toRaw 把 Vue 数据转成它能吃的格式。
实战小技巧：封装安全的数据桥接函数
为避免重复写 toRaw，可封装一个工具函数：
import { toRaw, isReactive, isRef, unref } from 'vue'
export function raw<T>(val: T): T {
if (isRef(val)) return raw(unref(val)) as T
if (isReactive(val)) return toRaw(val) as T
return val
}
// 使用
chartInstance.updateData(raw(state.chartData))
这样既兼容 ref/reactive，又保持类型安全，减少出错概率。
