Vue3组件销毁失败及定时器泄漏解决方案
在Vue3开发中，组件未能按预期销毁是常见问题，可能导致内存泄漏或定时器持续运行。本文分析一个useDocumentVisibility导致定时器泄漏的案例，并提供解决方案。
问题描述：
使用@vueuse/core库的useDocumentVisibility监听页面可见性，并用定时器实现页面可见时自动更新列表。即使组件生命周期钩子(onBeforeUnmount, onUnmounted)正常执行，定时器autoUpdateTimer仍运行，变量autoUpdateCheck和visibility也未被回收，导致异常行为。clearAutoUpdate函数未能解决问题。
立即学习“前端免费学习笔记（深入）”；
问题分析：
问题不在于生命周期钩子，而是变量引用和异步操作。
-
变量持久性： 即使组件销毁，如果变量在其他地方被引用，垃圾回收机制不会将其回收。
console.log虽然看似无害，却可能临时引用变量，阻止垃圾回收。即使移除console.log，如果api.queueList的回调函数在组件销毁后仍执行，回调函数中的变量引用也会阻止垃圾回收。 -
定时器手动销毁：
clearTimeout只清除定时器，不阻止定时器函数内部代码执行。如果定时器函数包含异步操作（如网络请求），这些操作会继续，即使定时器已清除。 -
异步操作处理：
api.queueList是异步操作。即使组件销毁，网络请求仍在进行，回调函数仍会执行，导致autoUpdateCheck.value和visibility.value被访问，定时器继续运行。需要在组件销毁前取消或中断网络请求，或在回调函数中添加判断，避免在组件销毁后执行操作。
解决方案：
-
彻底清除所有引用： 检查所有可能引用
autoUpdateCheck、visibility等变量的地方，确保在组件销毁前解除所有引用。 -
自定义Hook： 创建自定义Hook封装定时器逻辑，方便管理定时器的创建和销毁，降低出错概率。
-
AbortController： 使用
AbortController管理异步请求，在组件销毁前调用abort()取消请求，防止请求在组件销毁后继续执行。 建议启用并完善原代码中已注释的AbortController相关逻辑。
通过以上方法，可以有效解决Vue3组件销毁失败和定时器泄漏问题，确保程序稳定性和资源有效利用。
