vue2.x数组的响应式

vue2.x数组的响应式

在vue2中直接去修改数组中元素的值，视图是不会更新的，如下
data中有一个数组 为 arr : [
{
name: “张三”,
age: 20,
},
{
name: “李四”,
age: 18,
}
]
如果你是这样更新数据的->
this.arr[0].name = “王五”;
this.arr[1].age = 22;
修改长度也是无法触发视图更新的
this.arr.length = 3;
那么视图上是不会发生改变的，显示的还是张三，与18。
那么怎么让它触发视图更新，使其具有响应式呢，我们可以通过$set去更新，如下：this.$set(arr[0],“name”,“王五”)
this.$set(arr[1],“age”,18)
这样就可以了

如果你的数组是这样的
arr = [ “张三”,“李四”,“王五”,20,18,22 ]
那么久如此去更新
this.$set(arr,2,“大壮”)
李四是就被改为了大壮，视图也更新了
第一个参数是要更新的数组或者对象，第二个参数是数组的索引（下标）或者是对象的属性名称，第三个是修改的值。