vue3对一个reactive对象重新赋值失去响应式问题

问题场景

在一个异步请求中，对一个reactive对象重新赋值，失去响应式。

解决办法

在定义reactive的时候使用ref代理，在reactive中设置一个属性，用属性来代理重新变化的值。

// 使用reactive的某个属性来代替
let obj = reactive({
    
    
    data:''
})

//模拟异步操作
setTimeout(() => {
    
    
obj.data = 'Hello World!'
},1000)
// 使用ref来代替
let demo = ref()
// 模拟异步操作
setTimeout(() => {
    
    
    demo.value = {
    
    
    name:'小花'
}
},1000)

为什么产生这种原因

举个栗子

由图我们知道，对a重新赋值，vue的指向并未指向新的内存地址。所有对a的异步请求的重新赋值均失效。

那为什么ref却可以？

对于一个复杂引用数据类型，ref的底层还是用reactive代理。所有是相当于修改ref的某一个属性，还是同一块内存地址，同理，用reactive的某个属性代理修改的数据也是相同的原理。

为什么必须是异步的赋值才会导致该问题呢？

在vue中，所有对响应式的修改，并不是同步触发的，而是通过一个缓存队列才存储修改的操作，在下一次DOM更新循环之后执行。也就是说无论修改多少次，vue只更新一次，所以对vue来说，它只看最后一次操作。所以在同步中对一个reactive重新赋值是可以被监听到的。