Javascript 在vue数据对象中使用变量进行嵌套循环计算会导致代码中断

因此，我有一个对象，我想用它在span标记内渲染之前，对它包含的子对象执行一些计算，如下所示：

getTotal（成本计算日）

getTotal

是一种执行以下操作的方法：

costing_days.forEach((day) =>{
          day.project_material.forEach((material) => {
             this.total += (parseInt(material.amount) * parseInt(material.quantity));
          });

          day.project_labour.forEach((labour) => {
             this.total += (parseInt(labour.amount) * parseInt(labour.quantity));
          });
          return this.total
      });

它使用my vue数据对象中声明的

total

属性。 但它尖叫着说我的组件中有一个无限循环

现在，我在执行此循环计算的函数中使用了一个局部

total

变量，如下所示：

      let total = 0
      costing_days.forEach((day) =>{

          day.project_material.forEach((material) => {
             total += (parseInt(material.amount) * parseInt(material.quantity));
          });

          day.project_labour.forEach((labour) => {
             total += (parseInt(labour.amount) * parseInt(labour.quantity));
          });  
      });

      return total;

而且效果很好。

---

有人能帮我理解为什么当数据对象中的局部变量抛出错误时，局部变量工作吗？

Vue的反应性由getter和setter处理，对设置变量的每次更改都会立即触发重新渲染

正如@aefxx在评论中所建议的那样，每次更新

this.total

时，它都会尝试重新呈现模板，从而再次触发方法-导致无限循环

这就是为什么使用局部变量修复了它-

这一点。total

从未设置过-您所做的只是返回一个值，然后vue渲染它

有关vue反应性的更多信息：

---

发生在哪里？在watcher、computed或method中？它发生在一个方法中Vuejsm的一些奇怪行为我猜是您的模板调用了该方法，该方法反过来更新了

total

，这反过来又触发了重新渲染，进而调用了该方法等等。@Willower您在computed中也使用了total吗？