vue页面部分未刷新----------深层对象解构会覆盖的问题

本文探讨了Vue中页面部分不刷新的问题,焦点在于深层对象解构导致的双向绑定失效。作者提供了三种解决方案:避免覆盖、使用$set方法和$forceupdate。适合前端开发者理解并改进此类场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题描述

vue页面部分不刷新,在下一次页面刷新的时候才刷新

问题原因

//数据结构
this.query:{resign:{postA:'',postB:'',reason:''}}
res.data:{resign:{reason:''}}
//代码
this.query = {...this.query,res.data}
console.log(this.query)
//打印 {resign:{reason:''}}

 在深层对象解构的时候,res.data.resign将this.query.resign覆盖,导致postA和postB被删掉,最终导致vue双向绑定失败。

问题展示

var a={b:'',c:''}
var d={e:'',f:''}
a ={...a,...d}
console.log(a)  //{ b: '', c: '', e: '', f: '' }

var a={aa:{b:'',c:''}}
var d={aa:{e:'',f:''}}
a ={...a,...d}
console.log(a)  //{ aa: { e: '', f: '' } }

解决办法

1.结构的时候添加被删掉的变量

var a={aa:{b:'',c:''}}
var d={aa:{e:'',f:''}}
a ={...a,...d,aa:{...d.aa,b:'',c:''}}
console.log(a)  //{ aa: { b:'',c:'',e: '', f: '' } }

2.使用this.$set

调用方法:this.$set( target, key, value )
target:要更改的数据源(可以是对象或者数组)
key:要更改的具体数据
value :重新赋的值

示例: this.$set(this.a.aa,"b",2)

this.a.aa为要更改的数据源(对象),b为key值(要更改的具体数据),value为要赋的值

3.$forceupdate

强制刷新页面,不建议使用,会占用大量资源,使用到这个方法一般是因为你代码有问题

this.$forceupdate() 迫使vue组件重新渲染,实际上指的是强制重启render函数。即调用该方法后 只会触发beforeUpdate、updated 这两个生命周期,而且只会影响当前组件以及其插槽内容

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值