vue2用toRaw

在Vue 2中，toRaw是一个用于获取响应式对象的原始非响应式版本的方法。它可以用于访问Vue响应式对象的底层数据，而不受Vue的响应式系统的影响。

toRaw方法的使用场景通常是在需要直接操作数据而不触发响应式更新的情况下。例如，在某些特定的操作中，你可能需要直接修改数据而不希望触发Vue的响应式更新机制。

以下是使用Raw的示例代码：

import { reactive, toRaw } from 'vue'

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

console.log(rawObj.foo) // 输出 'bar'

// 直接修改原始对象
rawObj.foo = 'baz'

console.log(obj.foo) // 输出 'baz'

在上面的示例中，我们首先使用reactive函数将一个普通对象转换为响应式对象。然后，通过调用toRaw方法，我们可以获取到这个响应式对象的原始非响应式版本。接下来，我们可以直接修改原始对象，而不会触发Vue的响应式更新。最后，我们可以通过访问响应式对象来验证原始对象的修改是否生效。

相关问题

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.

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 ]