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

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

思路

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

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

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

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

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

第二版，我進(jìn)行了改進(jìn)，我把setInterval換成了setTimeout，因?yàn)閟etTimeout只執(zhí)行一次，所以要靠函數(shù)去驅(qū)動(dòng)它，然后我用到了updated，它也有一個(gè)弊端，就是有某一個(gè)數(shù)據(jù)更新，它就會(huì)觸發(fā)，所以有時(shí)會(huì)執(zhí)行多次。

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

最終版

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

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

總結(jié)

主要就是要了解vue的鉤子函數(shù)?？赡苈┒春芏啵Ｍ罄卸喽嘀附?，還有就是第一次寫，有點(diǎn)詞窮，請(qǐng)大家多多擔(dān)待。、

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論