Vue组件中清除定时器setInterval的方案

前言

在网页中，经常会使用定时器来进行时间或者数据的刷新操作。但在vue组件中使用需要注意两点：

1. 为了防止定时器造成内存溢出，因此，在离开页面或者组件销毁前需要进行清除定时器操作，以便造成定时器不断的继续更新操作；
2. 定时器是window对象自有的函数，在Vue中this默认指向的是Vue对象，而不是window对象，因此使用定时器函数的时候需要带上window（如：window.setInterval()，window.clearInterval()）,或者采用apply或者call的模式改变this的指向，具体可以参考博主的另一篇博客的讲解：js中this的指向的原理详解

具体方案

常用方案

• 在组件的data中定义一个定时器接受函数：

data() {            
    return {                              
        timer: null  // 定时器名称          
    }        
},

• 然后在需要定时器的地方调用定时器，并把定时器赋给定义的timer：

this.timer =window.setInterval (() => {
    // 某些操作
}, 1000)

• 最后在beforeDestroy()生命周期内清除定时器：

beforeDestroy() {
    window.clearInterval(this.timer);        
    this.timer = null;
}

• 该方案有两点不好的地方:

1. 它需要在这个组件实例中保存这个 timer，如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题，但是它可以被视为杂物。
2. 我们的建立代码独立于我们的清理代码，这使得我们比较难于程序化的清理我们建立的所有东西。

优化方案

通过一个程序化的侦听器解决上述两个问题

 const timer = window.setInterval(() => {
  	 // 某些操作
 }, 60000);
 this.$once("hook:beforeDestroy", () => {
    window.clearInterval(timer);
 });

1. Vue官方文档：程序化的事件侦听器
2. JavaScript中call,apply,bind的深入理解与对比
3. js中this的指向的原理详解

欢迎伙伴们相互交流，讨论。