VUE簡單的定時器實時刷新的實現(xiàn)方法

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

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

思路

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

這個小功能實現(xiàn)的自我總結

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

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

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

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

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

最終版

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

<script>
 export default {
 data() {
 return {
 list: [] // 獲取的數(shù)據(jù)列表
 }
 }
 created() {
 this.getData()
 }
 methods: {
 // 這是獲取數(shù)據(jù)的函數(shù)
 getData() {
 .....
 }
 // 這是一個定時器
 timer() {
 return setTimeout(()=>{
 this.getData()
 },5000)
 }
 },
 watch: {
 list() {
 this.timer() 
 }
 }
 destroyed() {
 clearTimeout(this.timer)
 }
 }
</script>

總結

主要就是要了解vue的鉤子函數(shù)。可能漏洞很多，希望大佬多多指教，還有就是第一次寫，有點詞窮，請大家多多擔待。、

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com