javascript - 当我在代码中添加 .push 函数以进行循环中断时

Question

我有一个数组，其中包含所有订单的详细信息(订单时间、订单详细信息、价格等)，我想查找每个月的总价格并将它们全部放入一个数组中。

  data(){
    checks:[//there is data from database]
    months:["2019-01","2019-02","2019-03","2019-04","2019-05","2019-06","2019-07","2019-08","2019-09","2019-10","2019-11","2019-12"],
    monthlyTotal:0,
    monthlyTotalsArr:[]
  },
  computed:{
   calcTotalMonthly(){
     for(let i=0; i<this.months.length; i++){
            this.checks.forEach((item => {
               if(item.orderTime.includes(this.months[i])){
                 item.bill.forEach(prod => {
                   this.monthlyTotal += parseInt(prod.price);
                 });
               }    
             }));
              this.monthlyTotalsArr.push(this.monthlyTotal);
             this.monthlyTotal = 0; 
         } return this.monthlyTotalsArr;

   }
  }

当我运行此命令时，出现错误[Vue warn]: You may have anInfinite update loop in a component render function.，并且monthlyTotalsArr.length将类似于1220.

如果我删除 this.monthlyTotalsArr.push(this.monthlyTotal); 和 console.log(this.monthlyTotal); 我只会看到 12 个结果，因为它应该是是的，但我不知道为什么 push 函数会中断循环。这是我的问题，最后我想在 monthlyTotalsArr 中看到 12 个不同的元素。

Answer 1

计算属性不应有副作用。在本例中，您要同时修改 monthlyTotal 和 monthlyTotalsArr。没有必要这样做，您只需在函数内使用局部变量，然后返回计算值即可。

发生的情况是 monthlyTotalArr 被注册为该计算属性的依赖项。但是您随后立即更改它，这会将计算属性标记为需要重新计算。它不断地循环尝试重新计算它，但每次它的依赖项发生变化时，它都需要再次循环。

你应该能够这样写:

calcTotalMonthly () {
  return this.months.map(month => {
    let monthlyTotal = 0

    for (const check of this.checks) {
      if (check.orderTime.includes(month)) {
        for (const prod of check.bill) {
          monthlyTotal += parseInt(prod.price)
        }
      }    
    }

    return monthlyTotal
  })
}

我已将 forEach 调用交换为 for/of 循环。这不是必需的，但我认为这更容易遵循。我已将主循环改为使用 map，因为这似乎就是它真正在做的事情。

如果您想在其他地方引用该数组，则可以将 calcTotalMonthly 重命名为 monthlyTotalsArr。 data 属性 monthlyTotal 和 monthlyTotalsArr 在我的版本中均被删除。

我没有尝试解决 3 个嵌套循环带来的潜在性能问题。