vue中页面缓存后destroyed失效，如何关闭定时器

场景

页面中设置了定时器，如果组件销毁是没有关闭定时器，他还会一直执行，会非常耗性能，所以需要及时关闭定时器。

关闭定时器

vue项目中，正常情况下，我们在生命周期 destroyed 中关闭即可，一旦页面中使用了keep-alive 进行缓存，此时 destroyed 会失效。需要在 deactivated 钩子函数去关闭，他是 keep-alive 特有的钩子函数。

代码

没有缓存页面：

destroyed(){clearInterval(this.timer)
}

缓存过的页面：

// 开启定时器
activated(){this.start()
},
// 关闭定时器
deactivated(){clearInterval(this.timer)
}

vue中页面缓存后destroyed失效，如何关闭定时器相关推荐

vue tab页面缓存处理
vue tab页面缓存处理问题:使用vant 框架.底部导航切换,tab页面缓存解决: 1.index 页面 xml 设置 <keep-alive><router-view v- ...
vue 删除页面缓存_vue项目强制清除页面缓存的例子
异常描述: 支付宝中内嵌h5项目(vue框架开发),前端重新打包上传之后访问页面会导致页面空白.页面tab点击异常之类异常情况,需要手动清除支付宝缓存才可以正常访问. 解决方案: 在HTTP协议中,只 ...
VUE单页面应用百度统计失效问题解决方法
VUE单页面应用在进行百度统计时,只能统计到主页的访问次数,而不能统计到子页面. 这是因为,如果按照以上百度统计提供的方法添加统计代码,在VUE单页面应用,如果不刷新,只会加载一次index.html ...
vue中keep-alive缓存的使用
keep-alive是什么? <keep-alive /> 是一个vue中内置组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中. 使用<keep-alive /& ...
vue 路由页面缓存
VUE框架真的很神奇,神奇到好多坑你都要填这次说说VUE里缓存页面的问题现在前端做APP的话,估计很少人会直接去用VUE cli来写,因为那样特别麻烦,你得配置很多东西.填很多坑!现在如果要求前端 ...
vue项目中页面生成pdf并下载，vue 中页面转PDF
方法一第一步.安装插件 // 第一个.将页面html转换成图片 npm install --save html2canvas // 第二个.将图片生成pdf npm install jspdf -- ...
【vue】页面缓存回跳后侧边栏z-index层级导致页面快闪
问题描述公司使用的帆软报表页面没有加keepAlive缓存,在从一个弹框页面跳转到子报表后,切换路由回到当前页面是会继续展示弹框页面,但是页面由于z-index层级问题会闪一下. 问题排查经过代码 ...
vue 父页面中的方法调用_解决Vue中页面成功渲染数据undefined的问题
前言这个标题不太好取. 本文需要下面的知识: https://zhuanlan.zhihu.com/p/260811233zhuanlan.zhihu.com 问题描述我最近的一个功能需求是通过 ...
vue中keepAlive缓存清除的问题
vue项目中经常会用到keepalive来做缓存,在应付基本要求上可以说非常方便.但是遇到同一个页面,根据条件不同,分别缓存或者不缓存,就有些麻烦了. 首先先把坑列出来: 1. <keep-al ...

vue中页面缓存后destroyed失效，如何关闭定时器

场景

关闭定时器

代码

vue中页面缓存后destroyed失效，如何关闭定时器相关推荐

最新文章

热门文章