vue頁面中定時器的使用

我們在使用vue開發項目的時候，或多或少會用到定時器，那么，在vue中使用定時器和我們在平時寫js時候使用定時器一樣嗎，答案肯定是不一樣的，定時器有個銷毀操作，如何在vue中銷毀一個定時器。

答案：在beforeDestroy生命周期銷毀定時器。

1、為什么銷毀它：

在頁面a中寫了一個定時器，比如每隔一秒鍾打印一次1，當我點擊按鈕進入頁面b的時候，會發現定時器依然在執行，這是非常消耗性能的。

2、解決方案1：

mounted(){
  this.timer = setInterval(()=>{
    console.log(1)
  },1000)      
},
beforeDestory(){
  clearInterval(this.timer)  
}

以上方式有兩點不好的地方：
它需要在這個組件實例中保存這個timer，如果可以的話最好只有生命周期鈎子可以訪問到它。這並不算嚴重的問題，但是它可以被視為雜物。

我們的建立代碼獨立於我們的清理代碼，這使得我們比較難於程序化的清理我們建立的所有東西。

解決方案2（推薦）：通過$onec這個事件偵聽器在定義完定時器之后的位置來清除定時器

mounted(){
  const timer = setInterval(()=>{
    console.log(1)
  },1000)
  this.$once('hook:beforeDestroy', ()=>{
    clearInterval(timer)
  })
}    

官網參考鏈接:https://cn.vuejs.org/v2/guide/components-edge-cases.html