vue组件中定时任务的优雅处理及页面离开时的清理
在Vue应用中，setInterval常用于实现定时任务，但如果不妥善处理，容易造成内存泄漏或资源浪费。本文介绍如何在Vue组件中每10秒调用一次方法，并在离开页面时停止该方法的调用。
示例代码中，setInterval(() => { setTimeout(this.aaa(), 0) }, 10000)存在问题：setTimeout(this.aaa(), 0)立即执行了this.aaa()，而非10秒后执行。 正确的写法是setTimeout(this.aaa, 0)，但仍未解决页面离开时定时器继续运行的问题。
解决方案：
为了在组件销毁前清除定时器，我们需要：
立即学习“前端免费学习笔记（深入）”；
- 在
data()中定义定时器ID变量：
data() {
return {
timer: null
};
},
- 在
mounted()中启动定时器并保存ID：
mounted() {
this.timer = setInterval(() => {
setTimeout(this.aaa, 0);
}, 10000);
},
- 在
beforeUnmount()(Vue 3) 或beforeDestroy()(Vue 2) 中清除定时器：
beforeUnmount() { // Vue 3
clearInterval(this.timer);
}
// or
beforeDestroy() { // Vue 2
clearInterval(this.timer);
}
通过以上步骤，定时器会在页面卸载时被正确清除，避免资源浪费。 请注意setTimeout中this.aaa的调用方式，避免立即执行。 确保根据你的Vue版本选择正确的生命周期钩子函数 (beforeUnmount 或 beforeDestroy)。
