目前Vue官网上只解释了数组内修改string、number等深层次响应数组更新检测
但是没有解释如何解决Vue深度响应Array中的Object,我自己想出了一套解决方案
解决方案:
首先需要这几个数据:
1、 需要深度响应的数组
2、 取出需要响应的Object,复制一份
3、 获取需要响应的Object的下坐标index
操作:
// 初始化被深度响应的Array
arr = []
// 向数组内添加响应的Object,比如说object1是从后端获取来的,需要添加到arr内
object1 = {
name:'zhangsan',
age: 18
}
vm.$set(arr, arr.lenght, object1)
// 修改arr中object1内的值,使vue可以监控到object1内部数据发生变化
// 将arr中object1获取出来
object2 = arr[0]
// 修改object2,比如修改age
object2.age = 19
// 此时arr中的object1内的age也同时改为19,这个不了解的,可看看引用类型的特性
// 此时arr比没有因object1发生变化而相应,那么接下这步就是解决vue深度响应Array中的Object了
index = 0 // object1在arr中的索引值
arr.splice(index, 1, object2) // 这段代码就解决了响应问题