$set——vue中数据更新，视图不更新的情况探讨

很早之前就知道this.$set可以解决vue中数据更新视图不更新的问题，但是对于什么情况下才会造成视图不更新一直很模糊，今天就来确认一下什么情况会造成视图不更新。

vue官网中对此的解释是：

需要注意的问题是，以下变动的数组中，vue是不能检测到的，也不会触发视图更新：

• 通过索引直接设置项，比如： app.books[2] = {...}
• 修改数组长度，比如：app.books.length = 2

 

通过测试发现对于纯数组来说，直接通过索引值的方式确实不能更新视图，要使用 this.$set(this.arr, 2, 'shuzu5') 这种方式来更新。

对于对象数组的已有属性来说，直接通过‘索引值.属性’的方式修改已有数据是可以更新视图的，比如：

this.obj[2].name = 'hahah'

但是，对于给数组中某个对象新增一个属性更新了数据的话，是不会更新到视图上的，比如：

 

this.obj[2].newProperty = 'hahah'
// 打印出来对象发现该对象的其他值在私有方法中都有get/set方法，但是新增的属性newProperty却没有get/set方法，使用$set后就有了。

以及直接更新某个索引值的整个对象也不会触发视图更新，比如：

this.obj[2] = {
    name: 'luck',
    value: '300'
}

map遍历虽然没有索引值的表现，但实际上还是通过索引值来进行操作的，新增属性同样不会触发试图更新，比如：

arr.map( item => {
    item.newProperty = ' hahah'
}