vue数组更新后不渲染页面与$set的渊源

时常有种情况：动态修改数组中的value发现js是修改成功了，但是页面上并未渲染出来 纳尼?咱就稍微聊一下数组中的一些方法。

提示：渲染页面是指：触发视图更新。如果无需视图更新 直接js里面修改是不用考虑这么多的。

data:{

arr:[{id:1,checked:false},{id:2,checked:false}]

}

A. 能修改原始数组的方法（均可触发数据重新渲染，至视图更新）

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

B.不修改原始原始数组，返回新的数组方法（可用新数组代替原始数组 来达到视图更新）

filter()

this.arr=this.arr.filter(item=>{item.checked=true;return item})

concat()

slice()

C.其他方法：通过指定下表修改对应value（无法触发视图更新）或循环或等等

例1：this.arr[0].checked=true(发现视图并未更新)

可用其他方法替代：

1.this.$set:

let itemTemp=this.arr[0]

itemTemp.checked=true

this.$set(this.arr,0,itemTemp)

2.或者用splice()：

注意：数组是引用类型，直接赋值（itemTemp=this.arr[0]）只是添加了一个指向数组的指针，原数组改变时，新数组也会改变

let itemTemp=(this.arr.concat())[0]

this.arr.splice(0,1,itemTemp)

例2：假如有个全选的功能（或者重置）也就是设置checked值

错误方法：(视图不更新)

this.arr.forEach(item=>{

item.checked=true

})

可替代为：

this.arr=this.arr.filter(item=>{

item.checked=true

return item

})