Vue3 computed中使用数组导致栈溢出：如何避免相互依赖的计算？-js教程-PHP中文网

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

聖光之護

发布： 2024-11-15 09:21:31

原创

798人浏览过

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中使用数组导致栈溢出：如何避免相互依赖的计算？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

Vue 3 独立组件挂载：无需根元素，集成后端渲染页面 Vue v-for 高效分组渲染与条件差异化展示教程 Vue教程：避免DOM操作中的‘null’错误，掌握id与ref的正确用法 Vue 3 教程：如何在 data 和 props 属性同名时精确监听变更 Vue组件中监听data和prop变化：避免命名冲突与高级监听技巧