2025-11-13 Vue3的toRaw函数

1、前言

之前在调试代码的时候，使用console.log输出一个vue ref定义的对象，发现其值被包裹在类似于Proxy的对象里。非常不方便查看。

2、内容

这其实是通过 reactive、ref 或其他响应式 API 创建的对象，正常的表现。如何来输出纯的Obj呢？这里就是用toRaw() 这个函数了。

import { reactive, toRaw } from 'vue'

// 创建响应式对象
const reactiveObj = reactive({
  name: '张三',
  age: 25,
  hobbies: ['读书', '游泳']
})

// 获取原始对象
const rawObj = toRaw(reactiveObj)

console.log(rawObj === reactiveObj) // false
console.log(rawObj) // 普通的 JavaScript 对象

那么在什么情况下会用到toRaw这个函数呢？

• 性能优化
  当你需要进行大量操作而不想触发响应式更新时：

import { reactive, toRaw } from 'vue'

const state = reactive({
  items: []
})

// 批量操作时使用原始对象，避免每次都触发响应式
function batchUpdate(newItems) {
  const raw = toRaw(state)
  raw.items.length = 0
  raw.items.push(...newItems)
}

• 传递给第三方库
  某些第三方库可能不兼容 Vue 的响应式对象：

import { reactive, toRaw } from 'vue'
import someLibrary from 'some-library'

const data = reactive({
  config: {
    api: 'https://api.example.com',
    timeout: 5000
  }
})

// 传递原始对象给第三方库
someLibrary.init(toRaw(data.config))

• 深度比较和序列化

import { reactive, toRaw } from 'vue'

const user = reactive({
  id: 1,
  name: '李四',
  profile: {
    email: 'lisi@example.com'
  }
})

// JSON 序列化
const jsonString = JSON.stringify(toRaw(user))

// 深度比较
function deepEqual(obj1, obj2) {
  return JSON.stringify(toRaw(obj1)) === JSON.stringify(toRaw(obj2))
}

不过有一点要注意的是，toRaw()只处理当前层级，对于深度嵌套的响应式对象，需要用递归的方式处理。

Enjoy!

大家如果觉得我分享的内容有所帮助或启发，请不要吝啬您的点赞，各位的点赞是我更新的最大动力，谢谢！