Vue3组件及定时器：路由切换后的生命周期管理
本文探讨Vue3组件在路由切换后，定时器未销毁的问题，并提供有效的解决方案。 在Vue3开发中，妥善管理组件生命周期和定时器至关重要。
问题描述：
使用document.visibilitychange监听页面可见性，并用setInterval创建定时器autoupdateTimer实现自动更新。即使组件的onBeforeUnmount和onUnmounted生命周期钩子已执行，autoupdateTimer仍然运行，相关变量（例如autoupdateCheck和visibility）也未被清除，导致持续的网络请求。
立即学习“前端免费学习笔记（深入）”；
问题分析：
问题并非组件未销毁，而是变量和定时器的管理不当。即使组件销毁，全局变量或未正确清除的定时器仍可能存在于内存中。 console.log仅用于调试，不会影响变量生命周期。
解决方案：
-
彻底清除定时器： 在
onBeforeUnmount和onUnmounted中都调用清除定时器的函数（例如clearAutoupdate），确保定时器完全停止。 特别注意，网络请求的回调函数可能仍然引用这些变量，需要额外处理。 -
自定义Hook管理定时器： 创建一个自定义Hook（例如
useMyInterval），封装定时器的创建和销毁逻辑。这能避免代码冗余，并保证定时器在组件卸载时被正确清除。 -
终止未完成的网络请求： 如果网络请求在组件卸载后仍在执行，其回调函数仍会影响变量并触发定时器。 在
onBeforeUnmount或onUnmounted中添加逻辑中止未完成的请求，或者在回调函数中添加判断条件，防止在组件已卸载后执行更新操作。 这取决于api.queueList的具体实现。
通过以上方法，可以确保Vue3组件在路由切换后正确销毁，释放资源，避免内存泄漏和不必要的网络请求。
