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

问题描述

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 这两个生命周期，而且只会影响当前组件以及其插槽内容