vue3中的toRaw API

news2024/11/21 1:42:41

文章目录

- 什么是toRaw API？
- 为什么需要toRaw？
- 如何使用toRaw？
- 实际应用场景

在这里插入图片描述

这两天在写项目的时候，发现了一个之前没用过的api，于是上网查了一下，发现这个api还是挺常用，所以在这记录一下

什么是toRaw API？

toRaw 是 Vue 3 中的新工具，用于获取一个响应式对象的原始对象。Vue 3 中引入了响应式代理，这意味着我们通常处理的是被代理的对象，而不是原始对象。toRaw 提供了一种方式，可以绕过代理，直接访问和操作原始数据。

为什么需要toRaw？

在某些情况下，直接操作原始对象比操作响应式代理更有效。以下是一些常见的场景：

调试和日志记录：在调试或记录对象时，直接输出代理对象可能会导致混淆，使用toRaw可以更清晰地看到原始数据。
性能优化：有时我们需要跳过代理机制进行一些性能关键的操作，这时toRaw可以派上用场。
库和插件开发：如果你在开发Vue插件或库，可能需要处理原始对象而不是响应式代理。

如何使用toRaw？

使用toRaw非常简单。它是一个从vue包中导出的函数，接受一个响应式对象并返回其原始对象。以下是一个基本示例：

import { reactive, toRaw } from 'vue';

const state = reactive({
  count: 0,
  nested: {
    message: 'Hello, Vue 3!'
  }
});

// 获取原始对象
const rawState = toRaw(state);

console.log(rawState); // { count: 0, nested: { message: 'Hello, Vue 3!' } }

// 修改原始对象不会触发响应式更新
rawState.count = 1;
console.log(state.count); // 0

// 修改响应式对象会正常工作
state.count = 2;
console.log(state.count); // 2
console.log(rawState.count); // 2

在这个示例中，我们首先创建了一个响应式对象state。然后，我们使用toRaw获取了这个响应式对象的原始对象rawState。可以看到，对原始对象的修改不会触发响应式更新，而对响应式对象的修改则会同步到原始对象。

实际应用场景

1、调试和日志记录
在调试复杂的响应式对象时，直接查看代理对象可能会让人困惑。使用toRaw可以更清晰地查看对象的实际结构。

import { reactive, toRaw } from 'vue';

const state = reactive({
  user: {
    name: 'Alice',
    age: 25
  }
});
console.log(toRaw(state));

2、性能优化
在处理大量数据时，跳过响应式代理进行操作可以提高性能。例如，在大型列表的批量更新中，直接操作原始对象会更高效。

import { reactive, toRaw } from 'vue';

const list = reactive([...Array(10000).keys()]);

const rawList = toRaw(list);

// 直接操作原始数组，提高性能
rawList.forEach((item, index) => {
  rawList[index] = item * 2;
});

console.log(list[0]); // 0，因为没有触发响应式更新
console.log(rawList[0]); // 0，因为我们直接修改的是原始对象

3、库和插件开发
在开发Vue插件或库时，可能需要处理原始对象而不是代理对象。例如，在创建一个深拷贝函数时，使用toRaw可以避免循环引用和代理对象带来的问题。

import { reactive, toRaw } from 'vue';

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  const cloned = Array.isArray(obj) ? [] : {};

  for (const key in obj) {
    cloned[key] = deepClone(toRaw(obj[key]));
  }

  return cloned;
}

const state = reactive({
  user: {
    name: 'Bob',
    age: 30
  }
});

const clonedState = deepClone(state);
console.log(clonedState); // { user: { name: 'Bob', age: 30 } }