我们都知道,打开一个定时器如果不去关闭它,那么它将会一直执行下去,这样是非常耗性能的,如下图所示:
解决方法1:
这也是我们通常用到的方法。
首先在data函数中定义定时器名称:
data() {
return {
timer: null,
};
},
然后这样使用定时器:
this.timer = setInterval(() => {
console.log(1);
}, 100);
最后在beforeDestroy()生命周期内清除定时器:
beforeDestroy() {
clearInterval(this.timer);
},
这样写呢是完全没有问题的,但是当你在一个页面中用了很多个定时器的时候,你会发现有点卡顿,这是因为 data中的这个变量timer是保存在这个组件实例el上,如果可以的话最好只有生命周期可以访问到它。
还有就是当你写的很多的时候你的beforeDestroy生命周期中会变成这样:
那你的代码可阅读性就非常的差了
解决方法2:
该方法是通过$once这个事件侦听器在定义完定时器之后的位置来清除定时器。以下是完整代码:
const timer = setInterval(() =>{
// 某些定时器操作
}, 100);
// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
类似于其他需要在当前页面使用,离开需要销毁的组件(例如一些第三方库的组件等等),都可以使用此方式来解决离开后以后在背后运行的问题。
综合来说,我们更推荐使用方案2,使得代码可读性更强,一目了然。