Vue3 computed属性导致栈溢出：如何排查和解决minDate和maxDate计算属性的无限循环问题？

Vue3 computed属性引发的栈溢出：问题分析与解决方案

在Vue3开发中，computed属性常用于计算属性的定义，但使用不当可能导致栈溢出。本文剖析一个computed属性导致栈溢出的案例，并提供有效的解决方案。

案例：minDate和maxDate计算属性的无限循环

customcalendar组件使用两个computed属性minDate和maxDate，它们都依赖于父组件传入的checkDate数组。minDate计算最小日期，maxDate计算最大日期。代码片段如下：

// customcalendar.vue
const props = defineProps({
  checkDate: {
    type: Array,
    default: () => []
  }
});

const minDate = computed(() => {
  if (props.checkDate.length) {
    const sortedDates = [...props.checkDate].sort((a, b) => a.getTime() - b.getTime());
    return new Date(sortedDates[0].getTime());
  } else {
    return new Date();
  }
});

const maxDate = computed(() => {
  if (props.checkDate.length) {
    const sortedDates = [...props.checkDate].sort((a, b) => b.getTime() - a.getTime());
    return new Date(sortedDates[0].getTime());
  } else {
    return new Date();
  }
});

// ...其余代码

运行这段代码后，控制台报错栈溢出。原因在于minDate和maxDate的计算依赖于props.checkDate，而它们的计算过程又修改了props.checkDate（通过排序操作），从而形成无限循环，最终导致栈溢出。

问题根源：循环依赖和数据修改

问题的核心在于computed属性的计算过程修改了其依赖的响应式数据。每次minDate或maxDate计算都会触发props.checkDate的改变，导致另一个computed属性重新计算，形成死循环。

解决方案：避免在computed中修改依赖数据

为了解决这个问题，避免在computed属性的计算过程中修改其依赖的响应式数据。我们可以创建一个新的响应式变量来存储排序后的数组。

改进后的代码：

import { ref, computed, watch, onMounted } from 'vue';

const props = defineProps({
  checkDate: {
    type: Array,
    default: () => []
  }
});

const sortedCheckDates = ref([]);

const minDate = computed(() => {
  return sortedCheckDates.value.length ? new Date(sortedCheckDates.value[0].getTime()) : new Date();
});

const maxDate = computed(() => {
  return sortedCheckDates.value.length ? new Date(sortedCheckDates.value.slice(-1)[0].getTime()) : new Date();
});

watch(
  () => props.checkDate,
  (newVal) => {
    sortedCheckDates.value = [...newVal].sort((a, b) => a.getTime() - b.getTime());
  },
  { immediate: true }
);

// ...其余代码

通过引入sortedCheckDates这个新的响应式变量，我们解决了computed属性的循环依赖问题，避免了栈溢出错误。watch函数监听props.checkDate的变化，并更新sortedCheckDates，确保minDate和maxDate始终使用正确的排序后的数组进行计算。immediate: true选项保证组件加载时立即进行一次排序。 使用slice(-1)[0]获取数组最后一个元素，避免了maxDate计算中的错误。 使用...newVal创建数组的浅拷贝，避免直接修改原数组。

通过以上改进，有效地避免了computed属性导致的栈溢出问题，确保了代码的稳定性和可靠性。