vue定时器：页面离开时优雅停止，避免资源浪费
在Vue应用中，定时器(例如setInterval)常用于周期性任务，但若未在用户离开页面时及时清除，则会造成资源浪费。本文介绍如何有效管理Vue定时器，确保在组件销毁前停止运行。
许多开发者会在mounted生命周期钩子中直接使用setInterval：
mounted() {
setInterval(() => {
setTimeout(this.aaa(), 0); // 此处setTimeout冗余
}, 10000);
}
这种方法的缺陷在于缺乏定时器停止机制。 长时间运行或频繁页面切换将导致大量定时器累积，影响性能。
改进方法：
立即学习“前端免费学习笔记（深入）”；
-
数据存储定时器ID: 在
data中定义变量存储setInterval返回的ID：
data() {
return {
timer: null
};
}
-
mounted中启动定时器: 启动定时器并将ID赋值给timer：
mounted() {
this.timer = setInterval(() => {
this.aaa(); // 直接调用，更简洁高效
}, 10000);
}
-
beforeDestroy中清除定时器: 在组件销毁前，使用clearInterval清除定时器：
beforeDestroy() {
clearInterval(this.timer);
}
通过以上步骤，beforeDestroy钩子函数保证了在组件卸载前定时器被正确清除，避免资源浪费和潜在问题。 需要注意的是，原始代码中的setTimeout(this.aaa(), 0)是多余的，直接调用this.aaa()即可。 这种改进后的方法更简洁、高效且可靠。
