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

10多年的玉田網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整玉田建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)公司從事“玉田網(wǎng)站設(shè)計”,“玉田網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

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

思路

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

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

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

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

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

第二版，我進(jìn)行了改進(jìn)，我把setInterval換成了setTimeout，因為setTimeout只執(zhí)行一次，所以要靠函數(shù)去驅(qū)動它，然后我用到了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>

總結(jié)

主要就是要了解vue的鉤子函數(shù)?？赡苈┒春芏?，希望大佬多多指教，還有就是第一次寫，有點詞窮，請大家多多擔(dān)待。、

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

新聞標(biāo)題：VUE簡單的定時器實時刷新的實現(xiàn)方法
文章鏈接：http://aaarwkj.com/article24/jpooce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、響應(yīng)式網(wǎng)站、動態(tài)網(wǎng)站、、網(wǎng)站制作、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)