vue中優雅的使用定時器

1、常見方法。在data中聲明一個變量，定時器綁定到變量中，然后在beforeDestory中銷毀這個定時器

舉個例子

首先我在data函數里面進行定義定時器名稱

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，使得代碼可讀性更強，一目了然。