解决vue中对象属性改变视图不更新的问题

Posted 2021-03-22 buxiugangzi

在使用VUE的过程中，会遇到这样一种情况， vue data 中的数据更新后，视图没有自动更新。

这个情况一般分为两种，

一种是数组的值改变，在改变数组的值的是时候使用索引值去更改某一项，这样视图不会实时更新

第二种情况是改变了对象的某一项，但是其他依赖这个数据的视图没更新

第一种情况是因为直接通过索引去改变数组，vue 对象监听不到他的变化 所以没有更新。

----解决方法  1. Vue.set(example1.items[0], { childMsg: ‘Changed!‘}）

　　　　　　2.使用Vue的变异方法 pop() push() shift() unshift() revese() sort() splice() 也会触发视图更新

 

第二种情况是修改对象的属性，比如父组件和子组件公用一份数据，数据通过props传到子组件，在子组件中修改数据父组件中不会响应。

方案一：利用Vue.set(object,key,val)

例：Vue.set(vm.obj,‘k1‘,‘v1‘)

方案二：利用this.$set(this.obj,key,val)

例：this.$set(this.obj,‘k1‘,‘v1‘)

方案三：利用Object.assign({}，this.obj)创建新对象

方案四：可以先删除掉该项，然后再使用set 去添加