Vue3 computed属性导致栈溢出：如何避免minDate和maxDate的无限循环？

在Vue 3中，computed属性是基于它们的依赖进行缓存的，只有当依赖发生变化时，computed属性才会重新计算。然而，如果computed属性之间相互依赖，可能会导致无限循环和栈溢出。

假设你有两个computed属性：minDate和maxDate，它们相互依赖，导致无限循环。为了避免这种情况，你可以采取以下几种方法：

1. 使用watch代替computed

如果minDate和maxDate之间的依赖关系比较复杂，可以考虑使用watch来监听它们的变化，并在变化时手动更新另一个值。

import { ref, watch } from 'vue';

export default {
  setup() {
    const minDate = ref(new Date());
    const maxDate = ref(new Date());

    watch(minDate, (newMinDate) => {
      if (newMinDate > maxDate.value) {
        maxDate.value = newMinDate;
      }
    });

    watch(maxDate, (newMaxDate) => {
      if (newMaxDate < minDate.value) {
        minDate.value = newMaxDate;
      }
    });

    return {
      minDate,
      maxDate,
    };
  },
};

2. 使用getter和setter分离依赖

你可以将computed属性的getter和setter分开，避免在getter中直接依赖另一个computed属性。

import { ref, computed } from 'vue';

export default {
  setup() {
    const minDate = ref(new Date());
    const maxDate = ref(new Date());

    const computedMinDate = computed({
      get: () => minDate.value,
      set: (value) => {
        if (value > maxDate.value) {
          maxDate.value = value;
        }
        minDate.value = value;
      },
    });

    const computedMaxDate = computed({
      get: () => maxDate.value,
      set: (value) => {
        if (value < minDate.value) {
          minDate.value = value;
        }
        maxDate.value = value;
      },
    });

    return {
      computedMinDate,
      computedMaxDate,
    };
  },
};

3. 使用watchEffect进行副作用管理

watchEffect可以自动追踪依赖，并在依赖变化时执行副作用。你可以使用watchEffect来管理minDate和maxDate之间的关系。

import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const minDate = ref(new Date());
    const maxDate = ref(new Date());

    watchEffect(() => {
      if (minDate.value > maxDate.value) {
        maxDate.value = minDate.value;
      }
    });

    watchEffect(() => {
      if (maxDate.value < minDate.value) {
        minDate.value = maxDate.value;
      }
    });

    return {
      minDate,
      maxDate,
    };
  },
};

4. 使用computed属性的缓存特性

如果minDate和maxDate的依赖关系是单向的，你可以利用computed属性的缓存特性，避免无限循环。

import { ref, computed } from 'vue';

export default {
  setup() {
    const minDate = ref(new Date());
    const maxDate = ref(new Date());

    const computedMinDate = computed(() => {
      return minDate.value > maxDate.value ? maxDate.value : minDate.value;
    });

    const computedMaxDate = computed(() => {
      return maxDate.value < minDate.value ? minDate.value : maxDate.value;
    });

    return {
      computedMinDate,
      computedMaxDate,
    };
  },
};

总结

为了避免computed属性导致的栈溢出和无限循环，你可以使用watch、watchEffect、getter和setter分离依赖，或者利用computed属性的缓存特性。选择哪种方法取决于你的具体需求和代码结构。