vue頁面的定時刷新

在做項目時我們肯定會遇到要求該頁面幾分鐘去定時刷新一下獲取最新數據這樣的情況，那麼這個時候我們就要使用setInterval()了。那麼我們應該把定時刷新放在什麼位置什麼時候觸發什麼時候清除呢？這就需要我們瞭解vue的生命週期。首先貼一張從官網截下來的圖吧。

在該圖上我已經標註了觸發和清除的時期，那麼我們在使用中還有幾個需要注意的點。

使用setInterval時this指向的問題。如果我們直接
this.timer = setInterval(function(){要觸發的函數}) 是會報錯的。因爲這樣的話this的指向爲window，但是我們要觸發的函數是掛載在vm實例上面的。所以這個時候就是箭頭函數發揮用處的時候了。我們可以直接這樣寫this.timer = setInterval(() => {要觸發的函數}).
使用mouted，beforeDestory時注意他們是和method平級的。

使用方法：

//設置10s刷新一次數據
        if (this.timer) {
            clearInterval(this.timer);
        }else{
            this.timer = setInterval(() => {
                this.getMigrateDetail(); //自己的方法
            },10000)
        }

我是在destroyed的時候清除頁面刷新的。

destroyed () {
      clearInterval(this.timer);//頁面銷燬時清除定時器
  }

這裏的getMigrateDetail（）是我自己定義的一個函數，大家在實現的時候只需要把它替換成自己的函數就ok了。