组件中使用定时器及销毁问题（vue的问题）

如果我们在页面A中使用了一个定时器，当从页面A跳转到页面B时，如果不手动清除这个定时器，那么它仍旧会执行，这不是我们所期望的。

通常能想到的常规解决办法就是，在data属性中定义一个timer，在代码中启动定时器，然后在组件销毁的时候清除定时器。具体代码如下：

data(){ 
    return{ timer:null } 
}, 
methods:{ 
    onStartTimer(){    
        this.timer = setInterval( () => { 
        // 执行一些操作 
        }, 1000) } }, 
    beforeDestroy() { 
        clearInterval(this.timer); 
        this.timer = null;     
    }
}

但是这里有两个潜在的问题：

它需要在这个组件实例中保存这个timer，如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题，但是它可以被视为杂物。

我们的建立代码独立于我们的清理代码，这使得我们比较难于程序化地清理我们建立的所有东西。

Vue官方文档给出的解决方案是，在定义timer的时候使用$once指令监听beforeDestroy这个钩子函数。具体代码为：

 methods:{ 
    onStartTimer(){ 
        const timer = setInterval( () => { 
        // 执行一些操作 }, 1000)
        this.$once('hook:beforeDestroy', () => {
             clearInterval(timer); 
        }) 
    } 
},

这样就解决了上面所列的两个问题。类似的这种在离开页面时需要销毁的组件都可以采用此方法。