VUE数组，对象修改，视图也同步更新的几种方法

BG：有时候会遇到，数组确实修改了，但是视图却没有更新的情况。

解决：

方案一：改变数组的指向，赋值为新数组

this.array = this.array.filter(...)
this.array = this.array.concat(...)

 

方案二：利用数组的变异方法，更新数组，视图同步更新

push()
pop()
shift()
unshift()
splice()  
sort()
reverse()

方案三：vue的set方法

数组修改

Vue.set(array, indexOfItem, newValue)
this.array.$set(indexOfItem, newValue)

对象修改

Vue.set(obj, keyOfItem, newValue)
this.obj.$set(keyOfItem, newValue)

方案四：用Object.assign或lodash.assign可以为对象添加响应式属性，可以触发视图更新

//Object.assign的单层的覆盖前面的属性，不会递归的合并属性
this.obj = Object.assign({},this.obj,{a:1, b:2})

//assign与Object.assign一样
this.obj = _.assign({},this.obj,{a:1, b:2})

//merge会递归的合并属性
this.obj = _.merge({},this.obj,{a:1, b:2})