vue組件里定時器銷毀問題

解決方案1:

data() {            
    return {                              
        timer: null  // 定時器名稱          
    }        
},

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

最后在beforeDestroy()生命周期內清除定時器：

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

方案1有兩點不好的地方：

• 它需要在這個組件實例中保存這個 timer，如果可以的話最好只有生命周期鈎子可以訪問到它。這並不算嚴重的問題，但是它可以被視為雜物。
• 我們的建立代碼獨立於我們的清理代碼，這使得我們比較難於程序化的清理我們建立的所有東西

 

解決方案2：

該方法是通過$once這個事件偵聽器器在定義完定時器之后的位置來清除定時器。以下是完整代碼：

const timer = setInterval(() =>{                    
    // 某些定時器操作                
}, 500);            
// 通過$once來監聽定時器，在beforeDestroy鈎子可以被清除。
this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
})

綜合來說，我們更推薦使用方案2，使得代碼可讀性更強，一目了然。如果不清楚$once、$on、$off的使用，這里送上官網的地址教程，在程序化的事件偵聽器那里。