Vue3 computed属性导致栈溢出：如何排查和解决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();
  }
});

// ...其余代码

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 }
);

// ...其余代码