Vue 3 中 toRaw() 函数的使用

是什么？

在 Vue 中，响应式数据是框架的核心特性之一，但是，有时我们可能需要直接处理原始数据，而不经过 Vue 的响应式层。这就是 toRaw() 函数的作用，返回响应式数据的原始数据。

怎么用？

举一个例子：

import { reactive, toRaw } from 'vue'

const state = reactive({ count: 0 })
const rawState = toRaw(state)

rawState.count++           // 直接修改原始对象
console.log(state.count)   // 仍然为 0，原始数据改变了，但视图没有更新

注意：toRaw() 返回的对象仍然与原来的响应式对象共享同一份内存，也就是说，对 rawState 的修改同样会影响到 state，但这些修改不会触发视图的更新 。