reactive转响应式

在使用Vue的响应式系统时，当使用reactive来构造响应式对象时，如果对其进行重新赋值，会导致原有变量失去响应式，页面不会发生联动更新。然而，我注意到引用中提到的一些误解。实际上，使用ref或reactive定义数据时，都会得到响应式对象。但是，如果使用reactive定义数据并对其进行重新赋值，会丢失原来响应式对象的引用地址，变成一个新的引用地址，指向的对象是没有经过reactive处理的普通对象，而不是响应式对象。为了避免这个问题，你可以使用Vue提供的toRefs方法将reactive的数据转换为响应式对象，以保留响应式的特性。具体做法是：let data = toRefs(reactive({ name: "", age: "" }))。这样做可以确保在重新赋值后，data仍然是一个响应式对象。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [「vue3」之 reactive丢失响应式](https://blog.csdn.net/m0_65489440/article/details/131158908)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [避大坑！Vue3中reactive丢失响应式的问题](https://blog.csdn.net/Yan9_9/article/details/128617371)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]