說明：我只是一個剛入門的小前端，你們可以指導我，但千萬不要噴我，雖然我知道我很垃圾！人嗎，都是要成長的！大佬，請多多指教！！！

我前段時間剛剛寫了一個類似余股票的項目，上邊的K線圖是要實時去刷新的，所以要用vue做一個心跳，當然大家也可以選擇用websocket，大佬們感覺肯定很簡單，但是我只是一個剛入門的小前端，特此記錄一下。

思路

其實思路很簡單，首先要了解vue的生命周期和vue的內置函數，其思路就是先定義一個定時器，然后去定時請求后臺，到最后關閉這個定時器，哈哈，是不是都是廢話，但是確實如此，你們可以先去嘗試一下。

這個小功能實現的自我總結

一開始我感覺很簡單，不就是個心跳嗎，在methods 中定義一個timer函數返回一個setInterval和一個getData函數，在timer中調用getData， 然后在created中去調用，其中就會有一個問題，就是剛進來頁面不會有數據，為什么想必大家肯定會知道，就是這是調用了一個定時器只有時間到了以后才會去請求后臺，這個不是很好解決嗎，在created 中在調用一次getData不就好了嗎，嗯，我就這樣做了，雖然我感覺不是很合理，啊啊啊啊，好煩，第一次寫不知道如何寫，還是用代碼來表達，這樣比較清楚........

第一版，這樣很不合理，因為這樣會加載頁面發送兩次數據，而且還有一個很大的雷，就是setInterval在網頁卸載是不會關掉，而且你再次進入這個頁面時，定時器會加速，這個BUG應該是因為vue切換頁面不會刷新的原因吧，請大佬指教。

<script>  export default {    created() {      this.timer()      this.getData()    }    methods: {      // 這是一個獲取數據      getData() {        .....      }      // 這是一個定時器      timer() {        return setInterval(()=>{          this.getData()        },5000)      }    },    destroyed() {  clearInterval(this.timer)    }  }</script>

第二版，我進行了改進，我把setInterval換成了setTimeout，因為setTimeout只執行一次，所以要靠函數去驅動它，然后我用到了updated，它也有一個弊端，就是有某一個數據更新，它就會觸發，所以有時會執行多次。

<script>  export default {    created() {      this.getData()    }    methods: {      // 這是獲取數據的函數      getData() {        .....      }      // 這是一個定時器      timer() {        return setTimeout(()=>{          this.getData()        },5000)      }    },    updated() {     this.timer()     }    destroyed() {  clearTimeout(this.timer)    }  }</script>

最終版

監聽list只要它變化就去觸發定時器，這樣就解決了updated的多次觸發。