美文网首页
vue深度响应Array中的Object(vue深度响应数组内的

vue深度响应Array中的Object(vue深度响应数组内的

作者: zackxizi | 来源:发表于2018-10-26 11:43 被阅读0次

目前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)  // 这段代码就解决了响应问题

相关文章

网友评论

      本文标题:vue深度响应Array中的Object(vue深度响应数组内的

      本文链接:https://www.haomeiwen.com/subject/ilsktqtx.html