Vue 3 中的 toRaw 和 markRaw

在 Vue 3 的响应式系统中，toRaw 和 markRaw 是两个非常实用的 API，它们可以帮助我们更好地管理和操作响应式数据。这两个 API 的名字已经暗示了它们的功能，但它们之间到底有什么区别呢？本文将通过具体的场景和代码示例，深入探讨这两个 API 的使用方法和特点。

一、场景引入：处理响应式数据

在实际开发中，我们经常会遇到需要处理响应式数据的场景。例如，在一个表单应用中，我们可能需要将用户输入的数据传递给后端 API，但后端 API 只接受普通对象，而不是响应式对象。在这种情况下，我们需要将响应式数据转换为普通对象，以避免不必要的性能开销。toRaw 和 markRaw 就可以帮助我们实现这一点。

二、toRaw：获取原始对象

（一）基本概念

toRaw 是一个用于获取响应式对象的原始对象的 API。它接受一个响应式对象作为参数，并返回该对象的原始形式。这个原始对象不再是响应式的，因此对它的修改不会触发视图的更新。

（二）使用方法

我们先来看一个简单的例子。假设我们有一个响应式对象 person，我们希望获取它的原始对象 person2，以保护 person 的数据不被意外修改。

import { reactive, toRaw } from 'vue';

const person = reactive({
  name: '托尼',
  age: 18
});

const person2 = toRaw(person);

console.log(person); // 响应式对象
console.log(person2); // 原始对象

在这个例子中，person2 是 person 的原始对象。我们可以通过 person 修改数据，但不能通过 person2 修改数据。person2 的变化不会触发视图的更新。

（三）实际应用

假设我们有一个表单应用，用户输入的数据是响应式的，但我们需要将这些数据传递给后端 API。后端 API 只接受普通对象，而不是响应式对象。我们可以使用 toRaw 来实现这一点。

import { reactive, toRaw } from 'vue';

const formData = reactive({
  name: '托尼',
  age: 18
});

const submitForm = () => {
  const rawData = toRaw(formData);
  console.log(rawData); // 原始对象
  // 发送原始对象到后端 API
};

submitForm();

在这个例子中，submitForm 函数将响应式对象 formData 转换为原始对象 rawData，然后将其发送到后端 API。这样可以避免后端 API 处理响应式对象，从而提高性能。

三、markRaw：标记原始对象

（一）基本概念

markRaw 是一个用于标记对象使其永远不会成为响应式的 API。它接受一个普通对象作为参数，并返回该对象。这个对象被标记后，将永远无法被 Vue 的响应式系统处理。

（二）使用方法

我们再来看一个例子。假设我们有一个普通对象 car，我们希望标记它使其永远不会成为响应式的。

import { reactive, markRaw } from 'vue';

const car = markRaw({
  brand: '奔驰',
  price: 100
});

const car2 = reactive(car);

console.log(car); // 原始对象
console.log(car2); // 原始对象

在这个例子中，car 被 markRaw 标记后，即使我们尝试使用 reactive 将其转换为响应式对象，car2 仍然是原始对象。car2 的变化不会触发视图的更新。

（三）实际应用

假设我们使用了第三方库 mockjs 来模拟后端接口数据。mockjs 生成的数据是普通对象，但我们不希望这些数据被 Vue 的响应式系统处理。我们可以使用 markRaw 来实现这一点。

import { markRaw } from 'vue';
import Mock from 'mockjs';

const mockData = Mock.mock({
  name: '托尼',
  age: 18
});

const safeMockData = markRaw(mockData);

console.log(safeMockData); // 原始对象

在这个例子中，safeMockData 被 markRaw 标记后，将永远无法被 Vue 的响应式系统处理。这样可以避免不必要的性能开销。

四、toRaw 与 markRaw 的区别

（一）功能区别

• toRaw：用于获取响应式对象的原始对象。返回的对象不再是响应式的，对它的修改不会触发视图的更新。

• markRaw：用于标记对象使其永远不会成为响应式的。返回的对象将永远无法被 Vue 的响应式系统处理。

（二）适用场景

• toRaw：适用于需要将响应式对象转换为普通对象的场景，例如传递数据给非 Vue 的库或外部系统。

• markRaw：适用于需要保护某些对象不被 Vue 的响应式系统处理的场景，例如处理第三方库生成的数据。

五、总结

toRaw 和 markRaw 是 Vue 3 中非常有用的 API，它们可以帮助我们更好地管理和操作响应式数据。toRaw 用于获取响应式对象的原始对象，而 markRaw 用于标记对象使其永远不会成为响应式的。