reactive数据不响应

我们知道,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`包裹一层对象,从而解决了这个问题。

相关推荐
源码集结号15 分钟前
java智慧城管综合管理系统源码,前端框架:vue+element;后端框架:springboot;移动端:uniapp开发,技术前沿,可扩展性强
java·vue.js·spring boot·源代码·大数据分析·城管·电子办案
Nuyoah.41 分钟前
《Vue3学习手记7》
javascript·vue.js·学习
悦悦子a啊1 小时前
C++之string
开发语言·数据结构·c++
赛卡1 小时前
IPOF方法学应用案例:动态电压频率调整(DVFS)在AIoT芯片中的应用
开发语言·人工智能·python·硬件工程·软件工程·系统工程·ipof
秋野酱1 小时前
基于Spring Boot+Vue 网上书城管理系统设计与实现(源码+文档+部署讲解)
vue.js·spring boot·后端
网络大镖客1 小时前
JavaScript高级进阶(五)
开发语言·前端·javascript
人工智能的苟富贵1 小时前
使用 TypeScript 开发并发布一个 npm 包(完整指南)
javascript·typescript·npm
API小爬虫2 小时前
利用 Python 爬虫按关键字搜索 1688 商品详情:实战指南
开发语言·爬虫·python
不当菜虚困2 小时前
JAVA设计模式——(九)工厂模式
java·开发语言·设计模式
柴郡猫乐园2 小时前
智能指针之设计模式5
开发语言·设计模式·智能指针