Vue.js 中 watch 函数的优化：避免不必要的计算

{"title":"Vue.js 中 watch 函数的优化：避免不必要的计算","description":"本文介绍如何在 Vue.js 中优化 watch 函数，避免在 if 语句成立时不必要的触发，从而提高代码性能。我们通过添加条件判断，仅当 watch 函数监控的属性值发生变化时才执行计算逻辑，避免了不必要的计算开销。","keywords":"Vue.js, watch, 优化, 性能, if语句, 条件判断, 计算逻辑","content":"在 Vue.js 中，watch 函数可以用来监控数据的变化，并执行相应的操作。但如果 watch 函数被不必要地触发，就会造成性能损耗。本文将介绍一种优化 watch 函数的方法，以避免在 if 语句成立时不必要的触发。

假设我们有一个名为 planModel 的对象，其中包含 eatScore、washScore、wearScore、toiletScore、moveScore 等属性，以及一个用于计算总分的 totalScore 属性。同时，我们还有一个名为 isUpdate 的变量，用于判断是否需要更新 planModel 对象。

以下是原始代码：

watch(() => planModel.eatScore, (newVal, oldVal) => {
  planModel.totalScore += newVal - oldVal;
});
watch(() => planModel.washScore, (newVal, oldVal) => {
  planModel.totalScore += newVal - oldVal;
});
watch(() => planModel.wearScore, (newVal, oldVal) => {
  planModel.totalScore += newVal - oldVal;
});
watch(() => planModel.toiletScore, (newVal, oldVal) => {
  planModel.totalScore += newVal - oldVal;
});
watch(() => planModel.moveScore, (newVal, oldVal) => {
  planModel.totalScore += newVal - oldVal;
});
if (unref(isUpdate)) {
  const receive = data?.record;
  Object.assign(planModel, receive);
  if (planModel.checkDate != null) {
    planModel.checkDate = dayjs(planModel.checkDate);
  }
  planModel.totalScore = parseInt(planModel.totalScore);
}

可以看到，即使 isUpdate 为 false，watch 函数也会被执行，导致 totalScore 被不必要地计算。为了优化这个问题，我们可以添加一个条件判断，只有当 planModel 中对应的属性值发生变化时才执行 watch 函数。

以下是优化后的代码：

if (unref(isUpdate)) {
  const receive = data?.record;
  Object.assign(planModel, receive);
  if (planModel.checkDate != null) {
    planModel.checkDate = dayjs(planModel.checkDate);
  }
  planModel.totalScore = parseInt(planModel.totalScore);
  // 添加条件判断，只有当新值与旧值不相等时才执行watch函数
  if (receive.eatScore !== planModel.eatScore) {
    watch(() => planModel.eatScore, (newVal, oldVal) => {
      planModel.totalScore += newVal - oldVal;
    });
  }
  if (receive.washScore !== planModel.washScore) {
    watch(() => planModel.washScore, (newVal, oldVal) => {
      planModel.totalScore += newVal - oldVal;
    });
  }
  if (receive.wearScore !== planModel.wearScore) {
    watch(() => planModel.wearScore, (newVal, oldVal) => {
      planModel.totalScore += newVal - oldVal;
    });
  }
  if (receive.toiletScore !== planModel.toiletScore) {
    watch(() => planModel.toiletScore, (newVal, oldVal) => {
      planModel.totalScore += newVal - oldVal;
    });
  }
  if (receive.moveScore !== planModel.moveScore) {
    watch(() => planModel.moveScore, (newVal, oldVal) => {
      planModel.totalScore += newVal - oldVal;
    });
  }
}

这样修改后，只有当 receive 对象中与 planModel 中对应的属性的值发生变化时，相应的 watch 函数才会被触发，并更新 planModel.totalScore 的值。如果属性值未发生变化，则 watch 函数不会被执行，planModel.totalScore 的值也不会改变。

通过这种优化，我们可以避免不必要的计算，提高代码性能。