Vue不能检测到Object/Array更新的情况的解决
29 浏览量
2020-12-10
08:31:49
上传
评论
收藏 70KB PDF 举报
Vue不能检测到不能检测到Object/Array更新的情况的解决更新的情况的解决
前言前言
看文档不认真，开发也没有多注意，总是hack。忽悠忽悠就过去，但怎么说，歪门邪道还是不太好，现在就亡羊补牢，总结
总结。
数组数组
索引索引
使用下标更新数组元素；
使用赋值方式改变数组长度；
使用下标增删数组元素；
正文正文
使用下标更新数组元素
data: {
arrs: [0, 1, 2, 3] }
直接使用this.arrs[0] = 'zero' ;虽然数组确实是被更新了，但是更新不会被渲染到视图（html页面）上。因为Vue没有检测到数组的
更新。
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
官方应对方法：
1、Vue.set( target, key, value )
Vue.set(this.arrs, 0, 'zero');
2.vm.items.splice(indexOfItem, 1, newValue)
this.arrs.splice(0, 1, 'zero');
使用赋值方式改变数组长度
即this.arrs.length = 100;无效！
官方应对方法：
1、vm.items.splice(newLength)
this.arrs.splice(100);
使用下标增删数组元素
即一下操作无效：
this.arrs[this.arrs.length] = this.arrs.length;
官方应对方法：变异方法。
push()
pop()
评论0