在Vue 項(xiàng)目的開發(fā)中我們會使用到定時(shí)器,一下我們以setInterval 為例來講解一下定時(shí)器的用法
通常情況下在Vue 的項(xiàng)目中我們先定義一個(gè)timer,作為等等定時(shí)器的變量
在周期函數(shù)mounted中定義定時(shí)器的執(zhí)行函數(shù)
注意這樣的寫法在Vue的周期中無法實(shí)現(xiàn)定時(shí)器的效果因?yàn)檫@里存在this的指向問題。我們的setInterval()的第一個(gè)參數(shù)無法正確獲得vue 實(shí)例中的方法帮非,我么可以使用箭頭函數(shù)來調(diào)整作用域
這樣我們可以在Vue的對應(yīng)頁面的加載完成之后執(zhí)行定時(shí)器的操作
注意:在頁面注銷之前要將定時(shí)器給注銷三热,不然當(dāng)你跳轉(zhuǎn)別的頁面的時(shí)候同樣會執(zhí)行定時(shí)器的方法,這樣會占用你的資源
注銷定時(shí)器兑宇,可以在beforeDestroy的生命周期中執(zhí)行clearInterval()銷毀定時(shí)器
優(yōu)化問題:
我們發(fā)現(xiàn)了一個(gè)問題就是timer的這個(gè)變量僅僅只是在我們的兩個(gè)生命周期中訪問到了,但是并沒有在其他的地方出現(xiàn)使用粱坤,引用尤大大的話將這個(gè)timer定義為雜物隶糕,同時(shí)尤大還提出了我們的建立代碼與我們清理代碼的是互不相關(guān)的,這使得我們比較難于程序化的清理我們建立的所有東西站玄。并且當(dāng)修改代碼的時(shí)候往往容易同時(shí)清理掉兩個(gè)部分枚驻,這是我們?nèi)菀缀雎缘模幌碌膬?yōu)化方案: