在 Vue 3 中，toRaw 和 markRaw 是两个与响应式系统相关的实用函数，它们用于处理响应式代理对象和原始对象之间的转换。让我们详细了解这两个函数的区别和用途。
toRaw
toRaw 函数用于获取一个响应式代理对象的原始版本。当你需要操作原始对象而不是响应式代理时，这非常有用。这是因为 Vue 3 使用 Proxy 对象来包装原始对象，以便可以追踪它们的变化并触发视图更新。
用途
- 绕过响应式追踪：当你需要直接操作原始对象时，比如将对象传递给第三方库或在不需要响应式行为的地方使用对象时。
- 性能优化：在某些情况下，避免不必要的代理操作可以提高性能。
示例
import { reactive, toRaw } from 'vue';
const state = reactive({ count: 0 });
// 获取原始对象
const rawState = toRaw(state);
// 现在 rawState 不是响应式的
rawState.count = 10; // 这不会触发视图更新
markRaw
markRaw 函数用于标记一个对象，使其永远不被 Vue 的响应式系统代理。这意味着即使你将这个对象传递给 reactive 或 ref 函数，它也不会变成响应式的。
用途
- 避免代理特定对象：如果你有一个大型对象或已知不变的对象，可以使用
markRaw来避免对其进行代理，从而节省性能开销。 - 兼容第三方库：如果你正在使用一个第三方库，而该库不支持代理对象，可以使用
markRaw来确保该对象不会被代理。
示例
import { reactive, markRaw } from 'vue';
const largeData = markRaw({ /* 大量数据 */ });
const state = reactive({
data: largeData
});
state.data.someProperty = 10; // 这不会触发视图更新
比较
toRaw：用于获取响应式对象的原始版本。它不改变对象本身的响应性，只是返回一个非代理的版本。markRaw：用于标记一个对象，使其永远不会被代理。这改变了对象本身的响应性。
何时使用
- 当你需要暂时绕过响应式追踪，或者在不需要响应式行为的地方操作对象时，使用
toRaw。 - 当你有一个已知不变的大对象，或者第三方库不支持代理对象时，使用
markRaw。
总结
toRaw 和 markRaw 都是为了处理 Vue 3 中的响应式系统而提供的实用函数。toRaw 用于获取响应式对象的原始版本，而 markRaw 用于标记一个对象，使其永远不会被代理。根据你的具体需求选择合适的函数来优化性能或解决特定问题。
