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

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

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

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

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

立即学习“前端免费学习笔记（深入）”；

// customcalendar.vueconst 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();  }});// ...其余代码

登录后复制