vue3 toRaw与markRaw

toRaw函数

toRaw函数用于返回一个响应式对象的原始非响应式版本。当你想要直接访问对象的原始属性而不触发依赖追踪时，这个函数非常有用。

用法示例

下面是一个使用toRaw函数的示例：

import { reactive, toRaw } from 'vue';

const data = reactive({
  name: 'John',
  age: 30
});

const rawData = toRaw(data);

console.log(rawData.name); // 输出: John
rawData.name = 'Jane'; // 直接修改原始对象的属性

console.log(data.name); // 输出: Jane

在上面的示例中，我们首先使用reactive函数将data对象转换为响应式对象。然后，我们使用toRaw函数获取data对象的原始版本，并将其存储在rawData变量中。我们可以直接访问rawData的属性，并直接修改它们，而不会触发Vue的响应式系统。这对于需要绕过响应式追踪并直接操作对象的场景非常有用。

注意事项

需要注意的是，使用toRaw函数获取的原始对象不是响应式的。这意味着当你直接修改原始对象时，Vue的响应式系统不会被通知到，因此相关的视图也不会更新。只有当你重新将原始对象转换为响应式对象时，才会重新建立响应式追踪。

markRaw函数

markRaw函数用于标记一个对象，使其在被转换为响应式对象时保持非响应式。这对于需要避免特定对象被自动转换为响应式对象的情况非常有用。

用法示例

下面是一个使用markRaw函数的示例：

import { reactive, markRaw } from 'vue';

const data = {
  name: 'John',
  age: 30
};

const reactiveData = reactive(data);
const nonReactiveData = markRaw(data);

console.log(reactiveData.name); // 输出: John
console.log(nonReactiveData.name); // 输出: John

reactiveData.name = 'Jane';
console.log(reactiveData.name); // 输出: Jane

nonReactiveData.name = 'Alice';
console.log(nonReactiveData.name); // 输出: Alice

在上面的示例中，我们首先创建一个普通的对象data。然后，我们使用reactive函数将data对象转换为响应式对象，并将其存储在reactiveData变量中。接下来，我们使用markRaw函数标记data对象，以防止它被转换为响应式对象，并将其存储在nonReactiveData变量中。我们可以看到，reactiveData的属性是响应式的，而nonReactiveData的属性是非响应式的，对其进行的修改也不会触发响应式追踪。

注意事项

需要注意的是，使用markRaw函数标记的对象将始终保持非响应式，即使在之后将其传递给reactive函数进行转换。这对于一些特定的对象，如第三方库提供的对象或一些不需要响应式追踪的对象，非常有用。