vue3里面的markRaw和toRaw

Vue 3 中的 `markRaw` 和 `toRaw` 是用于处理响应式对象的函数。

`markRaw` 函数可以将一个对象标记为“原始值”，使其不再具有响应式特性。这意味着该对象的任何属性发生变化时，都不会触发 Vue 的响应式更新。

`toRaw` 函数则是将一个经过响应式处理的对象还原成普通对象。这可以用于在某些场景下避免出现“深度观察”的问题（即观察到对象内部的属性变化），从而提高性能。

需要注意的是，`markRaw` 和 `toRaw` 都应该谨慎使用，因为它们可能会破坏 Vue 的响应式机制，导致一些意外的问题。通常情况下，我们应该尽量避免使用这两个函数。

相关问题

vue3 toRaw

toRaw是Vue 3中的一个方法，用于获取一个响应式对象的原始数据。在Vue 3中，使用ref或reactive创建的响应式对象都会被追踪和更新UI界面。但是，在某些情况下，我们可能需要对一个响应式对象进行修改，但不希望这个修改被追踪和更新UI界面，这时就可以使用toRaw方法获取原始数据进行修改。toRaw方法返回的是一个非响应式的对象，对它的修改不会触发UI更新。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue3学习 4.toRaw](https://blog.csdn.net/weixin_43152108/article/details/118160258)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue3中toRaw使用](https://blog.csdn.net/u011200562/article/details/120845561)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

vue3 reactive toRaw

`toRaw` is a function in Vue 3's `@vue/reactivity` package that returns the original raw reactive object of a proxy created by the `reactive` function.

In Vue 3, when you use the `reactive` function to create a reactive object, it wraps the original object in a proxy. The `toRaw` function allows you to access the original raw object from the proxy.

Here's an example usage:

import { reactive, toRaw } from 'vue';

const obj = reactive({ foo: 'bar' });
const proxy = toRaw(obj);

console.log(proxy.foo); // Output: bar
console.log(obj === proxy); // Output: false

In the example above, the `obj` is a reactive object created using `reactive`. When we call `toRaw(obj)`, it returns the original raw object, which is equivalent to `{ foo: 'bar' }`. Note that `obj` and `proxy` are not the same object, but they have the same values.

This function can be useful in certain scenarios where you need to access the original object or perform operations that are not supported on proxies but are supported on raw objects.