在 Vue 3 中,toRaw 是一个函数,用于获取被代理的原始(非响应式)对象。这个函数可以用来访问被响应式对象所包装的原始数据,而不是获取到的代理对象。
当我们使用 reactive 或 ref 创建响应式对象时,Vue 3 会通过代理将其转换为响应式对象,并劫持对其属性的访问和修改。但有时,我们可能需要直接访问原始的、非代理的对象。这就是 toRaw 函数的用途。
下面是一个使用 toRaw 的示例:
import { reactive, toRaw } from 'vue';
const original = { name: 'Alice', age: 25 };
const reactiveObj = reactive(original);
console.log(reactiveObj.name); // 输出:Alice
const rawObj = toRaw(reactiveObj);
console.log(rawObj === original); // 输出:true
在上述示例中,我们首先创建了一个原始的对象 original,然后使用 reactive 将其转换为响应式对象 reactiveObj。接着,我们使用 toRaw 函数获取 reactiveObj 真实的原始对象,并将其赋值给 rawObj。最后,我们通过比较 rawObj 和 original,确认它们是相同的对象。
toRaw 的主要用途是在 Vue 3 中与外部的不支持响应式的库或代码进行交互。通过获取原始对象,我们可以处理原始数据,而无需考虑代理对象的影响。
需要注意的是,toRaw 函数只能用于响应式对象,对于普通的对象、数组或其他非代理的数据,调用 toRaw 不会有任何影响。
详细信息
toRaw() 可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 创建的代理对应的原始对象。
这是一个可以用于临时读取而不引起代理访问/跟踪开销,或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用,请谨慎使用。