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

  • iphone xr如何截图(iphone xr手机截图怎么截)

    iphone xr如何截图(iphone xr手机截图怎么截)

  • 快手小店查不到订单怎么办(快手小店查不到物流信息怎么办)

    快手小店查不到订单怎么办(快手小店查不到物流信息怎么办)

  • 电脑屏幕挤压白斑修复(电脑屏幕挤压白斑会变大 pi)

    电脑屏幕挤压白斑修复(电脑屏幕挤压白斑会变大 pi)

  • 拼多多怎样帮朋友砍一刀(拼多多怎样帮朋友砍一刀图解)

    拼多多怎样帮朋友砍一刀(拼多多怎样帮朋友砍一刀图解)

  • 表格内数字显示E 是什么情况(表格内数字显示不全)

    表格内数字显示E 是什么情况(表格内数字显示不全)

  • b站弹幕屏蔽等级是根据什么(b站弹幕屏蔽等级机制)

    b站弹幕屏蔽等级是根据什么(b站弹幕屏蔽等级机制)

  • 怎么在抖音直播间点赞(怎么在抖音直播电视剧)

    怎么在抖音直播间点赞(怎么在抖音直播电视剧)

  • 突然6plus拍照模糊不清(苹果6s plus拍照突然变得模糊怎么回事)

    突然6plus拍照模糊不清(苹果6s plus拍照突然变得模糊怎么回事)

  • 微型机一般按什么进行分类(微型机分为哪几大类,各有何特点)

    微型机一般按什么进行分类(微型机分为哪几大类,各有何特点)

  • ipadair3有128g吗(ipadair3有512g吗)

    ipadair3有128g吗(ipadair3有512g吗)

  • 什么是5g双模手机(5g双模是真正的5g手机吗)

    什么是5g双模手机(5g双模是真正的5g手机吗)

  • 淘宝拒收可以退全款吗(淘宝拒收可以退运费险吗)

    淘宝拒收可以退全款吗(淘宝拒收可以退运费险吗)

  • 苹果xr怎么设置彩铃(苹果xr怎么设置铃声)

    苹果xr怎么设置彩铃(苹果xr怎么设置铃声)

  • 华为al30是全网通吗(华为lld—al30多少钱)

    华为al30是全网通吗(华为lld—al30多少钱)

  • 苹果怎么删除别人的面容(苹果怎么删除别人的面容解锁)

    苹果怎么删除别人的面容(苹果怎么删除别人的面容解锁)

  • 小米手环4绑定步骤(小米手环4绑定不了小米运动)

    小米手环4绑定步骤(小米手环4绑定不了小米运动)

  • 笔记本很卡清灰管用吗(笔记本很卡清灰没反应)

    笔记本很卡清灰管用吗(笔记本很卡清灰没反应)

  • wikihow怎么设置成中文(wikihow怎样设置中文)

    wikihow怎么设置成中文(wikihow怎样设置中文)

  • id在哪里看(企业微信id在哪里看)

    id在哪里看(企业微信id在哪里看)

  • 手机怎么看qq几年了(手机怎么看qq有多少个好友)

    手机怎么看qq几年了(手机怎么看qq有多少个好友)

  • 华为手机查使用痕迹(华为手机查使用痕迹可以删掉吗)

    华为手机查使用痕迹(华为手机查使用痕迹可以删掉吗)

  • Mac怎么设置默认文本打开方式(mac怎么还原出厂设置)

    Mac怎么设置默认文本打开方式(mac怎么还原出厂设置)

  • 【java web篇】MyBatis之Mapper代理(javaweb官方文档)

    【java web篇】MyBatis之Mapper代理(javaweb官方文档)

  • sesearch命令  查看SElinux策略(sed命令大全)

    sesearch命令 查看SElinux策略(sed命令大全)

  • 增值税的计税依据包括
  • 什么是消费税?特征有哪些
  • 股东购买自己公司产品
  • 可明确区分的商品
  • 增值税税率调整文件
  • 以前年度多缴的税款退回现金流量
  • 生产能量计入固定成本
  • 进口增值税抵扣信息委托核查函
  • 业务招待费税前扣除比例
  • 银行小额贷款是怎么还款的
  • 委托进口增值税如何抵扣
  • 营改增的优惠政策
  • 出售自建厂房的税率
  • 国家税务总局2017 11号
  • 交通卡定额发票购买
  • 新注册公司税务报到
  • 其他综合收益可以转损益的情况
  • 建筑企业建筑业
  • 进项税和销项税月末怎么结转
  • 进项税留抵需要转出吗
  • 企业集团内部各所属单位之间
  • 融资租赁纳税人是指
  • 开机进入睡眠模式按哪个键解除
  • 纯净版xp系统打不开了
  • php数组实现
  • 未计发放待遇
  • 预收一年的30万怎么算
  • 总公司给分公司调货
  • 魅族路由器mini padavan
  • php数据库编程
  • php数组去重函数
  • 买入返售金融资产和卖出回购金融资产
  • php stomp
  • notion all in one
  • 采购员出差预借差旅费
  • thinkphp6.0完全开发手册
  • yii框架教程
  • 企业待报解预算收入的分录
  • 预缴税款从哪里查
  • 公司的银行账号是不是和个人账号不一样
  • 银行存款利息收税吗
  • 应收帐款出售给银行会计分录
  • 普通发票可以抵扣进项吗
  • 深入浅析SQL Server 触发器
  • java将整数转化为数组
  • mongodb4.4.2安装教程
  • 现金流量表存货增加额怎么算
  • mysql数据库死锁
  • 存货在报表里是如何体现的
  • 进项税额红字
  • 居民和非居民企业的区别是什么
  • 专利技术转让损失会计分录
  • 期末留抵税额和账上哪一个数对应
  • 小微企业免税销售额怎么填
  • 以前期间留抵税额是什么意思
  • 补交进项转出的税分录
  • 原始凭证的审核内容
  • 小企业应收账款减值
  • win8怎么设置指纹
  • winxp u盘拒绝访问
  • smagent.exe - smagent是什么进程
  • linux系统了解
  • Win8系统网络SSID怎么设置?Win8设置网络SSID的方法
  • win8上不了网
  • jquery 限制文件大小
  • android图形
  • 微信小程序tabbar颜色
  • nodejs开发gui
  • shell 方法调用
  • javascript语法术语
  • bios查看电脑配置信息
  • jQuery+JSON实现AJAX二级联动实例分析
  • python自动生成
  • 正途科技有限公司
  • linux pythonide
  • 湖南地税网上办税服务厅
  • 贵州网上税务局官网登录
  • 下载重庆税务官方app
  • 海南国税局待遇
  • 3%增值税专用发票成本多少钱
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设