清除定時器，這是在我們開發(fā)項目中常見功能需求
在vue項目中清除定時器方法時我們通常會用到以下兩種方法
方法一
1猜年、首先在vue實例的data中定義定時器的名稱：
exprot defalut {
data(){
return{
timer:null
}
},
2夜矗、在方法（methods）或者頁面初始化（mounted()）的時候使用定時器
mounted(){
this.timer = setInterval((){
console.log('所放內(nèi)容')
},2000 )
},
3刁笙、然后在頁面銷毀的生命周期函數(shù)（beforeDestroy()）中銷毀定時器
beforeDestroy(){
clearInterval(this.timer)
},
}
這是段常見的代碼，但存在幾個問題
- vue實例中需要有這個定時器的實例拧揽，timer被定義在data里面慰照，實際上我們不需要他在data里面響應(yīng)操作灶挟，反而感覺有點多余,會造成性能的浪費。
- clearInterval 后沒有清空timer為null
- 開啟定時器和清除定時器的代碼分散開在兩個地方可讀性維護性都在損耗毒租，專業(yè)的說是使得我們比較很難的程序化的清理我們建立的東西稚铣。
方法一
export default{
data(){
retrun{}
},
mounted(){
let timer = setInterval((){
console.log('所放內(nèi)容')
})
this.$once('hook:berforeDestroy',()=>{
clearInterval(timer)
timer = null
})
},
beforeDerstroy(){
}
}
>在這里使用hook監(jiān)聽beforeDestroy生命周期，這樣timer只需要被定義在生命周期里
beforeDestroy 沒有觸發(fā)墅垮？
在后臺系統(tǒng)中惕医，我們常常會設(shè)置頁面緩存，而當路由被 keep-alive 緩存時是不走 beforeDestroy 生命周期的算色，所以有些小伙伴以為在 beforeDestroy 清除定時器就完事了抬伺，甚至都沒有檢查一下，實際上定時器并沒有被清除掉剃允。知道了原因也就好解決了沛简，借助 activated 和 deactivated 這兩個生鉤子：
export default{
data(){
retrun{}
},
mounted(){
this.$on('hook:activated', () => {
if (timer === null) { // 避免重復(fù)開啟定時器
timer = setInterval(() => {
console.log('setInterval')
}, 2000)
}
})
this.$on('hook:deactivated', () => {
clearInterval(timer)
timer = null
})
}
