歡迎訪問(wèn)我的博客https://qqqww.com/付鹿，祝碼農(nóng)同胞們?cè)缛兆呱先松鷰p峰澜汤，迎娶白富美~~~
@TOC
1 前言
最近看《vue.js實(shí)戰(zhàn)》這本書，看到清除定時(shí)器在beforeDestroy鉤子函數(shù)中進(jìn)行舵匾，但是按照經(jīng)驗(yàn)俊抵，我記得destroyed中也是可以的，于是自己建了一個(gè)vue-cli工程去研究清除定時(shí)器的一些方法
2 方式一
export default {
data() {
return {
timer: null
}
},
created() {
this.getBanner()
console.log('created')
},
mounted() {
console.log('mounted')
this.timer = setInterval(() => {
console.log('1')
}, 500);
},
updated() {
console.log('updated')
},
beforeDestroy() {
console.log('beforeDestroy' + '==========' + this.timer)
// clearInterval(this.timer)
},
destroyed() {
console.log('destroyed' + '=========' + this.timer)
clearInterval(this.timer)
}
}
在頁(yè)面掛在的時(shí)候設(shè)置了一個(gè)定時(shí)器坐梯，首先看看鉤子函數(shù)的場(chǎng)景务蝠，created和mounted在頁(yè)面渲染的時(shí)候就都會(huì)執(zhí)行出來(lái)，具體看控制臺(tái)打印烛缔，當(dāng)數(shù)據(jù)更新馏段，執(zhí)行updated，然后我做了個(gè)路由跳轉(zhuǎn)践瓷，將該頁(yè)面跳轉(zhuǎn)到另外一個(gè)頁(yè)面院喜，此時(shí)控制臺(tái)打印beforeDestroy==========54和destroyed=========54，可見(jiàn)當(dāng)頁(yè)面跳轉(zhuǎn)完成晕翠，這兩個(gè)鉤子函數(shù)都會(huì)執(zhí)行喷舀，所以我在這兩個(gè)地方分別嘗試去清除定時(shí)器，都是可以的
3 方式二
去網(wǎng)上找到一種方法淋肾，利用$once監(jiān)聽(tīng)
const timer = setInterval(() =>{
// 某些定時(shí)器操作
}, 500);
// 通過(guò)$once來(lái)監(jiān)聽(tīng)定時(shí)器硫麻，在beforeDestroy鉤子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
看了很多文檔樊卓，都推薦方式二拿愧，但始終沒(méi)搞明白為什么方式二就好
4 緩存
然后嘗試使用keep-alive對(duì)組件進(jìn)行緩存，發(fā)現(xiàn)并不能銷毀碌尔，這是destroyed是不執(zhí)行的浇辜，若要清除定時(shí)器只能在beforeDestroy
