vue toRaw注意点在哪里和用法使用介绍

歪歪100

809人浏览 · 2025-09-19 08:48:27

歪歪100 · 2025-09-19 08:48:27 发布

文章目录

在 Vue 3 中，toRaw 是一个用于获取响应式对象原始数据的工具函数，它属于 @vue/reactivity 模块。

toRaw 的主要作用是：

返回由 reactive、readonly、shallowReactive 或 shallowReadonly 创建的响应式对象的原始对象
这在需要临时读取数据而不触发响应式更新，或者要避免在某些操作中导致响应式对象被修改时非常有用

toRaw 是 Vue 3 响应式系统中的一个重要工具函数，用于获取响应式对象的原始数据。它的使用有一些关键注意点和适用场景，下面详细介绍：

一、核心用法

toRaw 接收一个由 Vue 响应式 API（reactive/readonly 等）创建的响应式对象，返回其对应的原始对象。

import { reactive, toRaw } from 'vue'

// 创建响应式对象
const reactiveData = reactive({ count: 0 })

// 获取原始对象
const rawData = toRaw(reactiveData)

console.log(reactiveData) // 响应式代理对象
console.log(rawData)      // 原始普通对象 { count: 0 }

二、关键注意点

仅对响应式对象有效

只对 reactive、shallowReactive、readonly、shallowReadonly 创建的对象有效。
对普通对象、ref 包装的原始值（如 ref(123)）使用时，会直接返回自身。

import { ref, toRaw } from 'vue'
const numRef = ref(100)
console.log(toRaw(numRef)) // 仍是 ref 对象（因为 ref 包装的是原始值，不是对象）
console.log(toRaw(numRef.value)) // 100（直接返回原始值）

修改原始对象不触发更新
- 通过 toRaw 获取的原始对象，修改其属性时：
  - 会同步影响响应式对象的数据（因为指向同一份内存）。
  - 不会触发组件重新渲染（跳过了响应式系统的依赖追踪）。
```
rawData.count = 100 // 修改原始对象
console.log(reactiveData.count) // 100（数据同步）
// 但组件不会重新渲染
```
避免长期持有原始对象
- 原始对象脱离了响应式系统的管控，长期持有可能导致：
  - 响应式系统无法追踪数据变化，引发数据不一致。
  - 内存泄漏风险（尤其是在组件卸载后）。
不能用于解除响应式
- toRaw 只是"获取原始对象"，而非"取消响应式"。响应式对象本身依然是响应式的，修改它仍会触发更新。

三、典型使用场景

性能优化
当需要对响应式数据进行大量操作（如循环修改多个属性），且不希望频繁触发组件更新时，可先通过 toRaw 获取原始对象批量操作，最后再同步一次。

const rawData = toRaw(reactiveData)
// 批量修改原始对象（不触发更新）
for (let i = 0; i < 1000; i++) {
  rawData.list.push(i)
}
// 手动触发一次更新（可选）
reactiveData.list = [...rawData.list]

规避响应式限制
某些第三方库可能不兼容 Vue 的响应式代理对象（如内置的 JSON.stringify 对代理对象序列化可能有问题），此时可用 toRaw 转为原始对象再处理。
```
// 序列化响应式对象可能有问题
console.log(JSON.stringify(reactiveData)) 

// 转为原始对象后序列化
console.log(JSON.stringify(toRaw(reactiveData)))
```
临时读取数据
仅需读取数据而不需要触发响应式更新时（如日志打印、调试），使用 toRaw 可避免意外触发依赖追踪。