Vue 3 中 toRaw 的用法详细讲解
toRaw 是 Vue 3 提供的一个API，主要用于从 Vue 的响应式对象中获取其对应的原始非响应式对象。1. toRaw 的作用
1、获取原始对象
当对象被 Vue 的响应式系统包裹时，直接访问它会返回一个 Proxy 对象。如果需要访问未被响应式系统代理的原始对象，可以使用 toRaw。
2、调试辅助
在调试时，如果响应式对象出现了意料之外的行为，toRaw 可以帮助我们查看原始数据。
3、与第三方库兼容
某些第三方库不支持 Vue 的响应式对象（Proxy 对象），这时可以通过 toRaw 将响应式对象转为普通对象传递给它们。
2. toRaw 的用法
2.1 基本语法
import { reactive, toRaw } from 'vue';
const reactiveObj = reactive({ foo: 'bar' });
const rawObj = toRaw(reactiveObj);
console.log(reactiveObj); // Proxy {foo: "bar"}
console.log(rawObj); // {foo: "bar"}
2.2 使用场景
1、获取原始对象进行对比或操作
响应式对象中的 Proxy 包裹可能会导致意外行为，比如在比较对象时。
import { reactive, toRaw } from 'vue';
const reactiveObj = reactive({ a: 1 });
const rawObj = toRaw(reactiveObj);
// 比较原始对象
console.log(rawObj === reactiveObj); // false
console.log(rawObj == { a: 1 }); // false
// 使用原始对象
const anotherObj = { ...rawObj }; // 拷贝原始对象
console.log(anotherObj); // { a: 1 }2、Debug 或日志记录
为了避免调试时输出 Proxy 对象，可以用 toRaw 获取原始数据。
import { reactive, toRaw } from 'vue';
const state = reactive({ count: 0 });
function logState() {
console.log('State:', toRaw(state));
}
state.count++;
logState(); // 输出：State: { count: 1 }3、防止无限递归更新
在某些情况下（如递归处理响应式对象），直接操作响应式数据可能会导致不必要的额外开销或无限递归，使用 toRaw 可以避免这些问题。
import { reactive, toRaw } from 'vue';
const data = reactive({ nested: { value: 1 } });
function process(obj) {
const raw = toRaw(obj); // 获取原始对象
console.log(raw); // { value: 1 }
}
process(data.nested);
3. 注意事项
1、toRaw 不会脱离响应式系统
使用 toRaw 获取原始对象后，对原始对象的修改不会触发 Vue 的响应式更新，但对原始对象的修改仍会触发更新。
来源:https://www.jb51.net/javascript/331140v4m.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]