vue toRaw是什么作用

Vue3中的`toRaw()`和`markRaw()`主要用于处理Vue响应式系统的特殊行为，特别是当涉及到深度复制或者JSON序列化时。

1. `toRaw(data)`[^1]：这个函数用于将一个可能包含Reactively定义的对象转换回它的原始形式，即移除所有Vue特定的元信息（如proxy）。这样做的目的是为了更直接地操作数据，使其不受Vue的响应性影响。例如，在setup函数中，如果你需要将`person`对象转换为非reactive形式以供其他库或API消费，可以这样做：

   person = toRaw(person);

2. `markRaw(object)`：与`toRaw`相反，`markRaw`用于标记一个对象，告诉Vue它不想跟踪该对象的变化。这通常在你想保留对象的原生状态，但又希望它是响应式的（例如，当你想动态添加到`person`对象中的子属性`family`）时使用：

   person.family = markRaw(family);

当你调用`markRaw`后，Vue将不会尝试追踪`family`对象的变化，但仍能保持其响应性特性，直到你再次更改标记状态。

相关问题

vue toRaw作用

Vue 3中的`toRaw()`和`markRaw()`这两个功能主要用于管理和转换数据的响应性。

1. `toRaw()`的作用[^1]:
`toRaw()`函数用于将响应式数据（比如通过`reactive()`创建的对象）转换成一个非响应式对象。这个操作类似于深拷贝，但只针对响应式部分。当你想要保存一份原始数据的副本，而不想让它受Vue实例状态变化影响时，可以使用它。例如：

   const originalData = { a: { b: 'value' } };
   const nonReactiveCopy = toRaw(originalData);
   // 修改原data的a.b不会影响nonReactiveCopy
   originalData.a.b = 'new value';
   console.log(nonReactiveCopy); // 输出：{ a: { b: 'value' } }

2. `markRaw()`的作用:
`markRaw()`则相反，它用于标记一个对象为原始对象，即使它是从响应式数据派生出来的。这意味着这个对象将不再是响应式的，不会自动跟踪其依赖并更新视图。举个例子：

   const person = reactive({ name: 'zhangsan', id: '1' });
   const rawPerson = markRaw(person);
   // 修改rawPerson.name不会触发视图更新
   rawPerson.name = 'lisi'; 
   console.log(person); // 输出：{ name: 'zhangsan', id: '1' }

注意，原始对象的修改不会影响到响应式的数据。

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 ]