Vue3 computed 属性相互依赖导致栈溢出？如何解决？

大家好，我们又见面了啊~本文《Vue3 computed 属性相互依赖导致栈溢出？如何解决？》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

vue3 computed 中的代码导致栈溢出？

问题：

一段 vue3 代码中使用 computed 导致了栈溢出，原因不明确。

// index.vue


// customcalendar.vaue

答案：

该问题是由相互依赖的 computed 属性导致的无限循环引起的。

mindate 和 maxdate computed 属性都依赖于 props.checkdate 数组。如果 checkdate 数组发生变化，这两个属性都会重新计算。在重新计算过程中，它们又会对 checkdate 数组进行排序，这可能导致它们相互触发重新计算，形成无限循环。

以下是对代码的修改，以解决此问题：

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

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

// 新增一个响应式属性来存储排序后的数组
const sortedCheckDates = ref([]);

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

const maxDate = computed(() => {
  if (sortedCheckDates.value.length) {
    return new Date(sortedCheckDates.value[sortedCheckDates.value.length - 1].getTime());
  } else {
    return new Date();
  }
});

// 监听checkDate的变化，并更新sortedCheckDates
watch(() => props.checkDate, (newVal) => {
  sortedCheckDates.value = newVal.sort((a, b) => a.getTime() - b.getTime());
});

const curYear = ref(new Date().getFullYear());
const curMonth = ref(new Date().getMonth());

watch(() => maxDate.value, (newVal) => {
  if (newVal) {
    curYear.value = newVal.getFullYear();
    curMonth.value = newVal.getMonth();
  }
}, {
  immediate: true,
});

onMounted(() => {
  // 初始化sortedCheckDates
  sortedCheckDates.value = props.checkDate.sort((a, b) => a.getTime() - b.getTime());
});

此修改通过引入一个额外的响应式属性 sortedcheckdates 来存储排序后的 checkdate 数组，解决了 computed 属性之间的相互依赖性。现在，当 checkdate 数组发生变化时，sortedcheckdates 数组将更新，并由 computed 属性使用它，从而避免了无限循环。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~