使用vue深度开发数组对象多层嵌套时视图不更新

当我们开发的时候，有一些数据是对象里面嵌套数组，数组里面嵌套对象，数据结构很复杂的时候，而且在你循环出来一个select下拉选择框的时候，不让联动的时候这时候就很难搞了结构大概是这样子的

渲染到页面上是这样子的

点击改变事件的时候，只让上边的改变，下边的不会改变，但是我做的时候就联动起来了，当我给那个数组一个布尔值的时候，值改变了，但是视图没更新，这就是因为数据结构太复杂了，所以一直渲染不到页面上，查了好多资料才知道，原来就是多层嵌套导致的
解决办法就是

// 用vue的$set方法，监听你添加到这个数字里面的show数据。默认值是true（根据需要自己写，你也可以自己写一个false）。
// this.dabuleList[index]是从后台接口调过来赋值给data里面获取的数据，.detailList[indexcin]是这个数组里面的另一个数组，show是我自己添加到这个数据里面的。
this.$set(this.dabuleList[index].detailList[indexcin],"show",true)

// 这是数据这个结构
 this.dabuleList.forEach((element,index) => {
   getMatch += element.match;
   getNotMatch += element.notMatch;
   getNotApplicable += element.notApplicable;
   getImmediateRectify += element.immediateRectify;
   getDeadlineRectify += element.deadlineRectify;
   element.detailList.forEach((detailListItem,indexcin) => {
// 因为你要监听这个数组里面的show的数据，所以就写到这里     
this.$set(this.dabuleList[index].detailList[indexcin],"show",true)
     detailListItem.show = true
     detailListItem.fileList.forEach(elementItem => {
       elementItem.uid = elementItem.id
       elementItem.name = elementItem.fileName
       elementItem.url = elementItem.filePath
       elementItem.status = 'done'

     })
   })
 })

当你改变的时候就可以根据下标（index）那么写了，这样就不会联动了，当然了，v-show必须是动态的，如果取data里面的值。就联动了。

 handleChangeselect(value,itemcin,indexcin,index) {
   if (value == '0') {
     this.dabuleList[index].detailList[indexcin].show=false;
   } else if (value == '1') {
      this.dabuleList[index].detailList[indexcin].show=true;
   } else {
     this.dabuleList[index].detailList[indexcin].show=true;
   }
 },