Vue3 computed中使用数组导致栈溢出：如何避免相互依赖的计算？

vue3 computed中使用数组引发栈溢出

在vue3中，computed属性是响应性的，当依赖它们的响应式数据改变时，computed属性会重新计算。

在给定的代码中，mindate和maxdate两个computed属性都依赖于props.checkdate数组。每当props.checkdate数组发生变化时，这两个属性都会重新计算。

不幸的是，这两个computed属性的计算过程会对props.checkdate数组进行排序，这可能会导致它们相互触发重新计算，从而形成无限循环，最终导致栈溢出。

解决方案

要解决此问题，可以创建一个新的响应式属性来存储排序后的数组，如下所示：

const sortedcheckdates = ref([]);

然后，在mindate和maxdate的computed属性中，使用新属性而不是对props.checkdate数组进行排序：

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

这些更改将阻止相互触发的无限循环，从而消除栈溢出错误。

以上就是Vue3 computed中使用数组导致栈溢出：如何避免相互依赖的计算？的详细内容，更多请关注硕下网其它相关文章！