說明：我只是一個剛入門的小前端，你們可以指導我，但千萬不要噴我，雖然我知道我很垃圾！人嗎，都是要成長的！大佬，請多多指教！！！
我前段時間剛剛寫了一個類似餘股票的專案，上邊的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的多次觸發。
<script>
export default {
data() {
return {
list: [] // 獲取的資料列表
}
}
created() {
this.getData()
}
methods: {
// 這是獲取資料的函式
getData() {
.....
}
// 這是一個定時器
timer() {
return setTimeout(()=>{
this.getData()
},5000)
}
},
watch: {
list() {
this.timer()
}
}
destroyed() {
clearTimeout(this.timer)
}
}
</script>
複製程式碼總結
主要就是要了解vue的鉤子函式。可能漏洞很多，希望大佬多多指教，還有就是第一次寫，有點詞窮，請大家多多擔待。