VUE设置和清除定时器的方式及遇到的问题
marsur 人气:0方法一、在生命周期函数beforeDestroy中清除
data() { return { timer: null; }; }, created() { // 设置定时器,5s执行一次 this.timer = setInterval(() => { console.log('setInterval'); }, 5000); } beforeDestroy () { //清除定时器 clearInterval(this.timer); this.timer = null; }
方法二、使用hook:beforedestroy(推荐)
created() { // 设置定时器,5s执行一次 let timer = setInterval(() => { console.log('setInterval'); }, 5000); // 离开当前页面时销毁定时器 this.$once('hook:beforeDestroy', () => { clearInterval(timer); timer = null; }) }
该方法与在生命周期钩子beforeDestroy中清除定时器的操作原理一样,但更有优势
1.无需在vue实例上定义定时器,减少不必要的内存浪费
2.设置和清除定时器的代码放在一块,可读性维护性更好
三、beforeDestroy函数没有触发的情况
1、原因
<router-view>外层包裹了一层<keep-alive>
< keep-alive > 有缓存的作用,可以使被包裹的组件状态维持不变,当路由被 keep-alive 缓存时不走 beforeDestroy 生命周期。被包含在
< keep-alive > 中创建的组件,会多出两个生命周期钩子: activated 与 deactivated。
activated
在组件被激活时调用,在组件第一次渲染时也会被调用,之后每次keep-alive激活时被调用。
deactivated
在组件失活时调用。
2、解决方案
借助 activated 和 deactivated 钩子来设置和清除定时器
(1)生命周期钩子
created() { // 页面激活时设置定时器 this.$on("hook:activated", () => { let timer = setInterval(()=>{ console.log("setInterval"); },1000) }) // 页面失活时清除定时器 this.$on("hook:deactivated", ()=>{ clearInterval(timer); timer = null; }) }
(2)hook
data() { return { timer: null // 定时器 } }, activated() { // 页面激活时开启定时器 this.timer = setInterval(() => { console.log('setInterval'); }, 5000) }, deactivated() { // 页面关闭(路由跳转)时清除定时器 clearInterval(this.timer) this.timer = null },
附:vue离开页面销毁定时器
vue 是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可。
data: { return { timer: null } }, created() { this.timer = setInterval(....); }, beforeDestroy() { if(this.timer) { //如果定时器还在运行 或者直接关闭,不用判断 clearInterval(this.timer); //关闭 } }
总结
加载全部内容