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（通过排序操作），从而形成无限循环，最终导致栈溢出。
问题根源：循环依赖和数据修改
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
问题的核心在于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属性导致的栈溢出问题，确保了代码的稳定性和可靠性。
