VUE簡單的定時器實時刷新

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

我前段時間剛剛寫了一個相似餘股票的項目，上邊的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的鉤子函數。可能漏洞不少，但願大佬多多指教，還有就是第一次寫，有點詞窮，請你們多多擔待。

笑看人生