reactive数据不响应

STATICHIT静砸2023-12-20 23:19

我们知道，reactive函数用于创建对象等复杂数据的响应式代理对象，当该对象的属性发生变化时，会自动触发视图更新。

但在Vue 3中，当我们使用`reactive`创建的对象或数组进行赋值时，尽管能够完成正常的赋值操作，但却无法触发响应式变化。

复制代码

let student = reactive({})
let obj={
    name:"一一",
    sex:"女"
}
student=obj;

上述代码student=obj可以实现将obj的值赋给student，但不能在页面众响应式变化。

问题根源

问题在于每次直接将对象或数组赋值给`reactive`创建的对象时，导致`reactive`创建的响应式对象直接被新赋值的对象代理。由于Vue 3中所有操作都在`Proxy`代理对象上执行，这导致了响应式失效。

所以说，相当于地址被替换了，赋值后已经不是原来的响应式代理对象了。

知道原因之后，就很好解决了。

法一：避免直接赋值，而是在对象内部进行赋值，以保持响应式效果

javascript 复制代码

let obj={
    name:"一一",
    sex:"女"
}


let student=reactive({})
student=obj

//改为
//↓↓↓↓↓↓↓↓↓↓↓↓

let data = reactive({
    student:null,
})
data.student=obj

法二：另一种解决方法是直接使用`ref`

javascript 复制代码

let obj={
    name:"一一",
    sex:"女"
}


let student=reactive({})
student=obj

//改为
//↓↓↓↓↓↓↓↓↓↓↓↓

let student=ref({})
student.value=obj

Vue 3的响应式机制是基于ES6的`Proxy`实现的。

`Proxy`本身用于对象拦截，通过`new Proxy`返回的值触发`get`和`set`方法，并通过ES6的`Reflect`进行反射，动态地对被代理对象的属性进行操作。由于`Proxy`是基于对象的拦截，当对象本身是原始值时，拦截无效，响应式也就失效。而`ref`在实现响应式时通过`.value`包裹一层对象，从而解决了这个问题。