Vue 3 中 toRaw 的用法详细讲解

亲子鉴定中心

toRaw 是 Vue 3 提供的一个  API，主要用于从 Vue 的响应式对象中获取其对应的原始非响应式对象。

1. toRaw 的作用

1、获取原始对象
当对象被 Vue 的响应式系统包裹时，直接访问它会返回一个 Proxy 对象。如果需要访问未被响应式系统代理的原始对象，可以使用 toRaw。
2、调试辅助
在调试时，如果响应式对象出现了意料之外的行为，toRaw 可以帮助我们查看原始数据。
3、与第三方库兼容
某些第三方库不支持 Vue 的响应式对象（Proxy 对象），这时可以通过 toRaw 将响应式对象转为普通对象传递给它们。

2. toRaw 的用法


2.1 基本语法

1. import { reactive, toRaw } from 'vue';
   
2. const reactiveObj = reactive({ foo: 'bar' });
   
3. const rawObj = toRaw(reactiveObj);
   
4. console.log(reactiveObj); // Proxy {foo: "bar"}
   
5. console.log(rawObj); // {foo: "bar"}

复制代码

2.2 使用场景

1、获取原始对象进行对比或操作
响应式对象中的 Proxy 包裹可能会导致意外行为，比如在比较对象时。

1. import { reactive, toRaw } from 'vue';
   
2. const reactiveObj = reactive({ a: 1 });
   
3. const rawObj = toRaw(reactiveObj);
   
4. // 比较原始对象
   
5. console.log(rawObj === reactiveObj); // false
   
6. console.log(rawObj == { a: 1 }); // false
   
7. // 使用原始对象
   
8. const anotherObj = { ...rawObj }; // 拷贝原始对象
   
9. console.log(anotherObj); // { a: 1 }

复制代码

2、Debug 或日志记录
为了避免调试时输出 Proxy 对象，可以用 toRaw 获取原始数据。

1. import { reactive, toRaw } from 'vue';
   
2. const state = reactive({ count: 0 });
   
3. function logState() {
   
4.   console.log('State:', toRaw(state));
   
5. }
   
6. state.count++;
   
7. logState(); // 输出：State: { count: 1 }

复制代码

3、防止无限递归更新
在某些情况下（如递归处理响应式对象），直接操作响应式数据可能会导致不必要的额外开销或无限递归，使用 toRaw 可以避免这些问题。

1. import { reactive, toRaw } from 'vue';
   
2. const data = reactive({ nested: { value: 1 } });
   
3. function process(obj) {
   
4.   const raw = toRaw(obj); // 获取原始对象
   
5.   console.log(raw); // { value: 1 }
   
6. }
   
7. process(data.nested);

复制代码

3. 注意事项


1、toRaw 不会脱离响应式系统

使用 toRaw 获取原始对象后，对原始对象的修改不会触发 Vue 的响应式更新，但对原始对象的修改仍会触发更新。


来源:https://www.jb51.net/javascript/331140v4m.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！