美文网首页
you may have an infinite update

you may have an infinite update

作者: 5cc9c8608284 | 来源:发表于2023-10-06 10:16 被阅读0次

我这里出现这个问题是由于在computed里改变依赖的数据导致的:
computed里面依赖的所有数据一旦发生变化,就是重新执行该computed,举个例子:

    dataList:{
      get(){
        let arr=this.originalEquipments;
        for(let i=0;i<arr.length;i++){
          for(let j=0;j<this.equipments.length;j++){
            if(arr[i].height==this.equipments[j].height){
              arr.splice(i,1,{...arr[i],checked:true});
            }
          }
        }
        if(this.equipments.length>0&&this.equipments.length<this.originalEquipments.length){
          this.isIndeterminate=true
        }
        if(this.equipments.length==this.originalEquipments.length&&this.equipments.length!=0){
          this.checkAll=true
        }
        return arr
      },
      set(val){
        return val
      }
    }

上面的写法是有问题的,会导致无限循环,因为这句代码let arr=this.originalEquipments;引用了 this.originalEquipments,在
arr.splice(i,1,{...arr[i],checked:true});这里修改了arr,导致this.originalEquipments也发生了改变,所以这里会死循环,正确的写法应该如下:

dataList:{
      get(){
        let arr=this.originalEquipments.slice();
        for(let i=0;i<arr.length;i++){
          for(let j=0;j<this.equipments.length;j++){
            if(arr[i].height==this.equipments[j].height){
              arr.splice(i,1,{...arr[i],checked:true});
            }
          }
        }
        if(this.equipments.length>0&&this.equipments.length<this.originalEquipments.length){
          this.isIndeterminate=true
        }
        if(this.equipments.length==this.originalEquipments.length&&this.equipments.length!=0){
          this.checkAll=true
        }
        return arr
      },
      set(val){
        return val
      }
    }

slice() 方法不会改变原始数组,这里的arr将是一个全新的不指向this.originalEquipments地址,所以下面代码改变 arr,不会导致重新计算this.originalEquipments的值,这样就可以避免无限循环问题了。

相关文章

网友评论

      本文标题:you may have an infinite update

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