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

我前段時(shí)間剛剛寫了一個(gè)類似余股票的項(xiàng)目，上邊的K線圖是要實(shí)時(shí)去刷新的，所以要用vue做一個(gè)心跳，當(dāng)然大家也可以選擇用websocket，大佬們感覺肯定很簡(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é)

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

第一版，這樣很不合理，因?yàn)檫@樣會(huì)加載頁面發(fā)送兩次數(shù)據(jù)，而且還有一個(gè)很大的雷，就是setInterval在網(wǎng)頁卸載是不會(huì)關(guān)掉，而且你再次進(jìn)入這個(gè)頁面時(shí)，定時(shí)器會(huì)加速，這個(gè)BUG應(yīng)該是因?yàn)関ue切換頁面不會(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)聽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)待。、

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