vue3.x 的toRaw 与 markRaw详细解读

在 Vue 3.x 中，toRaw 和 markRaw 是两个用于处理响应式数据的工具函数。它们可以帮助你更精细地控制数据的响应式行为。以下是它们的详细解读和示例。

1. toRaw

作用

toRaw 用于获取一个响应式对象的原始（非代理）对象。Vue 3 的响应式系统通过代理（Proxy）实现，toRaw 可以绕过代理，直接访问原始数据。

使用场景

• 当你需要直接操作原始数据，而不触发响应式更新时。

• 当你需要将响应式对象传递给不支持代理的第三方库时。

示例

import { reactive, toRaw } from 'vue';

const state = reactive({
  foo: 1,
  bar: 2,
});

const rawState = toRaw(state);

console.log(rawState); // 输出: { foo: 1, bar: 2 }

rawState.foo = 10; // 直接修改原始对象，不会触发响应式更