vue中清除定时器的高阶方法

程序化的事件侦听器

比如，在页面挂载时定义计时器，需要在页面销毁时清除定时器。这看起来没什么问题。但仔细一看 this.timer 唯一的作用只是为了能够在beforeDestroy 内取到计时器序号，除此之外没有任何用处。

// vue2 代码中
export default {
    
    
	data() {
    
    
		return {
    
    
			timer: null,
		}
	},
	// 挂载
    mounted() {
    
    
        this.timer = setInterval(() => {
    
    
            console.log('a')
        }, 1000)
    },
    // 消亡
    beforeDestroy() {
    
    
        clearInterval(this.timer)
    }
}

如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题，但是它可以被视为杂物。

我们可以通过 $on 或 $once 监听页面生命周期销毁来解决这个问题：

export default {
    
    
    mounted() {
    
    
        this.creatInterval('a')
        this.creatInterval('b')
    },
    creatInterval(msg) {
    
    
        let timer = setInterval(() => {
    
    
            console.log(msg)
        }, 1000)
        // 监听消亡周期，定时器清除
        this.$once('hook:beforeDestroy', function() {
    
    
            clearInterval(timer)
        })
    }
}

使用这个方法后，即使我们同时创建多个计时器，也不影响效果。因为它们会在页面销毁后程序化的自主清除，不会造成内存泄漏。