位置: 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 动态添加路由)

  • 8个方法让你的应用图标脱颖而出(如何让你)

    8个方法让你的应用图标脱颖而出(如何让你)

  • 黑鲨3和黑鲨3pro的区别有哪些(黑鲨3和黑鲨3pro对比)

    黑鲨3和黑鲨3pro的区别有哪些(黑鲨3和黑鲨3pro对比)

  • 微信半夜语音通话但没有记录(微信语音半夜响了却没消息)

    微信半夜语音通话但没有记录(微信语音半夜响了却没消息)

  • iphone手机如何拦截垃圾短信(iphone手机如何拦截地区号码)

    iphone手机如何拦截垃圾短信(iphone手机如何拦截地区号码)

  • 技嘉2080ti大雕和小雕的区别(技嘉2080ti大雕怎么样)

    技嘉2080ti大雕和小雕的区别(技嘉2080ti大雕怎么样)

  • 苹果耳机录音有杂音滋滋(苹果耳机录音有突突声)

    苹果耳机录音有杂音滋滋(苹果耳机录音有突突声)

  • 安卓四大组件及其作用(安卓中的四大组件)

    安卓四大组件及其作用(安卓中的四大组件)

  • 抖音视频设为私密影响权重吗(怎么把抖音所有视频设置私有)

    抖音视频设为私密影响权重吗(怎么把抖音所有视频设置私有)

  • ipadpro开机键没反应(ipadpro开机键没反应怎么办)

    ipadpro开机键没反应(ipadpro开机键没反应怎么办)

  • 无法激活面容ID怎么办(无法激活面容id有几种情况)

    无法激活面容ID怎么办(无法激活面容id有几种情况)

  • 拼多多延迟发货怎么赔偿(拼多多延迟发货怎么设置)

    拼多多延迟发货怎么赔偿(拼多多延迟发货怎么设置)

  • 苹果8p左上角有暗斑怎么解决(苹果8p左上角有什么排线)

    苹果8p左上角有暗斑怎么解决(苹果8p左上角有什么排线)

  • 微信里面我的企业怎么删除(微信里面我的企业怎么删除掉)

    微信里面我的企业怎么删除(微信里面我的企业怎么删除掉)

  • iphone8怎么分屏(iphone8怎么分屏视频)

    iphone8怎么分屏(iphone8怎么分屏视频)

  • 为什么微信语音会中断(为什么微信语音发不出去)

    为什么微信语音会中断(为什么微信语音发不出去)

  • b450和a320主板区别(b450m与a320)

    b450和a320主板区别(b450m与a320)

  • 小米同步的数据在哪(小米手机数据同步有什么用)

    小米同步的数据在哪(小米手机数据同步有什么用)

  • 集线器在osi第几层(集线器工作在数据链路层吗)

    集线器在osi第几层(集线器工作在数据链路层吗)

  • excel中一个完整的函数包括什么(Excel中一个完整的函数包括哪些)

    excel中一个完整的函数包括什么(Excel中一个完整的函数包括哪些)

  • 微信被删了发消息对方能看到吗(微信被删了发消息对方还能看见吗)

    微信被删了发消息对方能看到吗(微信被删了发消息对方还能看见吗)

  • ps的文字怎样加边框(ps文字怎样加渐变)

    ps的文字怎样加边框(ps文字怎样加渐变)

  • qq好友详细资料在哪(qq好友详细资料看不了)

    qq好友详细资料在哪(qq好友详细资料看不了)

  • 小米5怎么截图(小米怎么截图手机屏幕长图)

    小米5怎么截图(小米怎么截图手机屏幕长图)

  • iPhone SE和华为P8 Max哪个好?(苹果se和华为p9哪个好)

    iPhone SE和华为P8 Max哪个好?(苹果se和华为p9哪个好)

  • 我国流转税的税种有哪些
  • 购房返现金需要什么资料
  • 工程类工资表为哪些内容
  • 所得税申报表里季初资产是指什么
  • 已扣缴税额
  • 发生销售退回如何开票
  • 税控软件维护
  • 贸易公司退税怎么做账
  • 发票收到以后必须查验吗
  • 贷款的印花税税率
  • 企业咨询服务费合同
  • 文化事业建设费减免政策
  • 小规模收到专票要做进项税额转出吗
  • 建筑业的一般纳税人
  • 未缴少缴税款追征期
  • 收到财政扶贫补贴会计分录
  • 贴息收据税前扣除是什么
  • 电脑图标怎么在下面显示
  • mac符号在哪里
  • 所得税补税怎么申报
  • 冲销去年暂估收入
  • win10网络带宽
  • bios setup uitlity
  • 百合花怎么养殖简单
  • 用java做项目
  • php使用内置函数的过程
  • 实缴注册资本股权转让怎么交税
  • 行政单位捐赠收入需要上缴财政吗
  • 开发产品结转到哪个科目
  • pnaico.exe是什么软件
  • 汽车运输企业的实际成本计算单位是
  • zen+框架
  • 金税盘如何使用流程
  • 三万个字多久写完
  • vue qrcode生成二维码
  • 使用groupadd命令创建用户组
  • 二手车交易发票怎么收费
  • 帝国cms使用手册
  • 固定资产暂停使用期间需要计提折旧吗
  • 亏损合同预计负债的会计分录
  • 未开票交税怎么做账
  • 有赞微小店认证麻烦
  • python缺省函数
  • 借支差旅费属于什么科目
  • 事业单位成本核算具体指引—公立医院
  • 经营租入的设备属于什么会计要素
  • 长期股权投资会计准则2021修订
  • 在租赁公司贷款买的车绿本上会有我的名字吗
  • 分期收款提供劳务 是什么
  • 往来账目
  • 一次性伤残补助金是单位给的还是社保给的
  • 应付款多付了怎么入账
  • 应付职工薪酬包括福利费吗
  • 长期股权投资的交易费用计入哪里
  • 慈善捐款流程
  • 管理会计主要内容包括
  • windows安装mysql5.7详细步骤
  • mysql优化表命令
  • windows8休眠如何唤醒
  • Linux系统磁盘分配
  • 文本文件模式
  • 如何关掉数据
  • linux中安装telnet
  • 两个linux系统之间如何传文件
  • js浅拷贝的方法
  • js设置导航固定
  • javascript的介绍
  • unity 动态生成模型
  • npm yarn命令对比
  • node 回调函数
  • unity2020怎么导入资源
  • python接口编写
  • 基于javascript的毕业设计
  • 安卓开发日记本
  • 简单的智能家居
  • bootstrap按钮的风格有哪些?
  • 以非gradle方式将 Eclipse 项目导入Android Studio
  • 江苏省国税电子发票查询
  • 土地二次买卖
  • 化妆品的消费税税率为15%的比例税率
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设