很早之前就知道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'
}