位置: IT常识 - 正文

VUE设置和清除定时器(vue清空页面数据)

编辑:rootadmin
VUE设置和清除定时器 方法一、在生命周期函数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; })}

推荐整理分享VUE设置和清除定时器(vue清空页面数据),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue清除settimeout,vue清空页面数据,vue关闭页面清空存储,vue的删除方法,vue清除settimeout,vue的删除方法,vue怎么清除cookie,vue怎么清除cookie,内容如对您有帮助,希望把文章链接给更多的朋友!

该方法与在生命周期钩子beforeDestroy中清除定时器的操作原理一样,但更有优势

1.无需在vue实例上定义定时器,减少不必要的内存浪费

2.设置和清除定时器的代码放在一块,可读性维护性更好

三、beforeDestroy函数没有触发的情况

1、原因

VUE设置和清除定时器(vue清空页面数据)

<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},
本文链接地址:https://www.jiuchutong.com/zhishi/294591.html 转载请保留说明!

上一篇:赫尔辛基的哈加杜鹃花公园,芬兰 (© Samuli Vainionpää/Getty Images)(赫尔辛基哈加赫利亚大学)

下一篇:vue动态路由添加,vue-router的addRoute方法实现权限控制,添加根路由和子路由(vue 动态添加路由)

  • 年终双薪究竟该怎么算
  • 金税盘系统维护注册码
  • 接受捐赠的增值税处理
  • 应付职工薪酬明细账模板
  • 增值税发票如何作废流程
  • 管理费用和研发费用的区别
  • 小规模纳税人增值税申报表怎么填
  • 先分后合是什么意思
  • 收到快递费属于什么科目
  • 交通运输企业的装卸业务的全部费用
  • 固定资产明细账怎么填
  • 收付转凭证如何排序装订
  • 驾驶培训费可以报销吗
  • 公司欠增值税如何补交?
  • 公司工资发放错误怎么退回
  • 没有进项的产品开了发票怎么办
  • 未达起征点的增值税要交所得税吗
  • 农产品收购发票怎么抵扣
  • 吊装费和吊车费是一样的不?
  • 建筑工程预收款预缴增值税的时间
  • 个税手续费返还政策文件
  • 为什么申报个人所得税还要补税
  • 怎么给自己的宽带改名字
  • 简易征收月末需要转出未交增值税吗
  • php数组函数输出《咏雪》里有多少"片"字
  • 房贷每月利息如何算
  • mgaqdesk.exe进程有什么作用 mgaqdesk进程查询
  • php function
  • 个人投资所得税率是多少
  • phpcrawl
  • 运城盐湖中国死海养生城
  • failed to execute goal org.apache
  • zend framework手册
  • 赠送的商品怎么入库 企业会计准则
  • 育空领地
  • php 随机数
  • php从数据库中读取数据
  • vue3.0教程
  • javascript创建对象及应用
  • 猿创部落是干什么的
  • 个税返还的会计处理
  • 代扣车船税的会计处理
  • javascrapt
  • 个人提供翻译服务
  • wordpress如何删除导入的主题
  • 瀑布流样式
  • 工程结算如何快速审核
  • 汽车修理厂利润
  • 做私活要收个人所得税吗
  • 工会经费计税依据是应发还是实发
  • 公司投资者如何避免风险
  • 资产处置损益借贷方向表示什么
  • 去年的暂估入库今年想把它给冲出来怎么做分录
  • 连锁店的总部取名
  • 事业单位装修费账务处理
  • 代理记账许可证查询
  • sql server数据库怎么导出
  • DWHeartbeatMonitor.exe进程是什么意思 DWHeartbeatMonitor是安全的进程吗
  • win7系统开机蓝屏0x0000007b
  • xp桌面底部任务在右边
  • rcapi.exe - rcapi是什么进程 有什么用
  • 系统解决问题的方法
  • 如何提升windows版本
  • 苹果mac查看
  • 如何关闭win8自带杀毒
  • iptables防火墙规则
  • javascript中的数据类型分为两大类
  • 动作
  • shell echo-e
  • unity android build support
  • &&在js中
  • 狗刨好学吗
  • Android include 标签注意点
  • unity shader saturate
  • 张孝祥西江月
  • javascript怎么定义二维数组
  • java 视频教程
  • 江苏省税务局电话咨询热线
  • 客运站汽车票查询真伪
  • 无锡市社保局电话是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设