Vue3中reactive丢失响应式问题

Vue提供了两种方式来创建响应式数据，ref和reactive,对象类型的响应式数据用reactive定义更好，因为reactive可以同时追踪对象的属性和嵌套对象的变化，而ref只能追踪基本类型的变化。
当使用reactive来定义对象类型的响应式数据时，Vue会追踪对象的属性，并在属性发生变化时触发相关的视图更新。这使得我们可以更加方便地管理复杂的数据结构，而不需要手动去监听对象属性的变化。
在给reactive定义的对象赋值时，有几种情况会导致响应式丢失需要注意：

直接赋值

let data=reactive({
          name:"",
          age:""
})
// 请求接口，直接赋值给data
let res=await getUserApi();  //请求接口
data=res.data;   //将返回的结果赋值给data

原因是，原生js的引用类型的赋值，其实是按照引用地址赋值，一个不恰当但是很通俗的解释就是，这个地址具备响应式的能力，对于vue重新赋值的时候不是将新的对象赋值给那个地址，因此vue的指向并未指向新的内存，赋值失效。借用一个博主的图片

2. 解构赋值

let data=reactive({
          name:"",
          age:""
})
// 请求接口，将返回的对象解构赋值给data
let res=await getUserApi();  //请求接口
data={res.data};

解构赋值，实际上会区分原始类型的赋值，和引用类型的赋值，原理同上。目前仅遇到过以上两种情况会导致丢失响应式，后续遇到再补充~

解决方案1：可以使用Object.assign

let tempInfo = await requestFormData();
Object.assign(userInfo, tempInfo);