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})