位置: 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:mb_ereg_search()的用法_mbstring函数
  • 直接人工的核算包括
  • php最好的教程
  • 基于Python的flask百战电商流程图
  • 有哪些常见的不可数名词英语
  • 税盘可以全额抵扣是什么意思
  • 哪一个国家有大提顿国家公园
  • 财务人员如何管控费用支出
  • 企业所得税如何更正申报
  • 出口免抵增值税是什么意思
  • 购买财务软件的费用
  • vscodehtml快捷键
  • 银行存款余额调节表是不是原始凭证
  • 金税盘全额抵扣分录
  • 查补收入是否享受免税政策
  • phpcms怎么样
  • seata1.3.0配置
  • 代收代付进项税转出吗
  • 什么情况下需要做肠胃镜
  • 怎样进行制造费用的归集
  • 一般纳税人购入不动产增值税税率
  • sql server 2008使用教程
  • 计提应交增值税怎么做账务处理
  • 小规模纳税人实行简易征收办法
  • 赠送成本的会计分录
  • 原始凭证按来源分为
  • 什么是来料加工和进料加工
  • sql server本地登录
  • mysql密码总是输入错误
  • SQLServer XML查询18句话入门教程
  • win7系统如何打开
  • 无法使用ie浏览器
  • ubuntu服务
  • 苹果mac无法连接网络
  • Red Hat Enterprise Linux AS release 4 apache+MYsql+PHP的安装和优化
  • win7使用率
  • win7旗舰版如何禁止更新
  • 武汉做无创要预约吗
  • window10关闭
  • win7连接路由器设置
  • linux文件中添加内容
  • win8.1玩游戏好不好
  • python生成二维码添加图片
  • JavaScript的函数库
  • ExtJS4 组件化编程,动态加载,面向对象,Direct
  • perl读取文件内容
  • 搭建nodejs
  • 安卓匿名电话软件
  • 输入命令的三种方法
  • jquery.min.js源代码
  • tbc背包插件
  • 安卓开发viewpager的用法
  • js获取表单元素
  • jquery动态添加的元素怎么添加事件
  • jqueryshow和hide封装
  • jquery实例
  • 调研报告与调研文章的区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设