计算属性报错：Maximum recursive updates exceeded.

计算属性或普通函数中有对相关依赖的响应式数据进行一次以上的更新就可能导致达到最大执行的限制：

const calcSurplus = computed(() => (k: string) => {
  const nowMont = cashbook.value[year.value][k];
  let isFirstMonth = false;
  let expenses = 0;
  let surplus = 0;

  nowMont.outlays?.forEach(ele => {
    expenses += Number(ele.cost);
  });

  montKs.forEach((ele, index) => {
    if (k == ele && index == 0) {
      isFirstMonth = true;
    }
  });

  surplus = Number(nowMont.budget) - expenses;

  if (!isFirstMonth) {
    const nowK = montKs.findIndex(ele => ele == k);
    const preMont = cashbook.value[year.value][montKs[nowK - 1]];
    if (preMont?.surplus && nowMont?.budget) {
      surplus = Number(nowMont.budget) - expenses + Number(preMont.surplus);
    }
  }

  nowMont.surplus = surplus;
  // here =>
  nowMont.budget = surplus;

  return surplus;
});

这里有两个更改响应式数据的表达式，经过测试，删除其中一个，就不会出现标题中所说的问题。于是我猜想，因为修改赋值 surplus，页面 DOM 更新、重新渲染，此时，又接着修改 budget 属性，页面 DOM 又更新、又重新渲染，以至于出现 Maximum recursive updates exceeded. 警告。

总结：在模板中使用计算属性或函数时要注意更新的响应式数据不要超过一个（也有可能是仅限于我这个情况），如果出现执行次数超出的问题可以最先从这个地方着手解决，总之提供了一个解决该问题的思路。