解决vue-router加上定时器之后出现的bug

最新推荐文章于 2022-03-30 10:44:35 发布
最新推荐文章于 2022-03-30 10:44:35 发布
阅读量405 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/3827679/blog/3021417
版权

场景：在工作中经常会遇到一些弹幕，走马灯文字，这类需要定时调用的，路由跳转之后，因为组件已经销毁了，但是setlnterval还没有销毁，还在继续后台调用，控制台会不断报错，如果运算量大的话，无法及时清除，会导致严重的页面卡顿。 出现的问题：使用setInterval（路由）跳转成功之后，当前页面无法重新跳转路由， 解决方法：在组件生命周期beforeDestroy停止setInterval

记录下自己在工作当中遇到的问题，来认识到自己的不足

转载于:https://my.oschina.net/u/3827679/blog/3021417

chengyan8346
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter基本 Taro ，扩展成 vue-router 的使用体验Installationnpm i vue-taro-router -SUsage// router.jsimport VueTaroRouter from "vue-taro-router";const router = new VueTaroRouter();// 添加拦截器...
vue-router.js
12-30
vue路由vue-router.js文件下载
Vue前端定时器
weixin_46007404的博客
04-25 804
Vue中非常实用简单的 前端定时器 js中： data: { timer: '', }, methods : { //定时器：5秒 timerSetInterval:function (){ //循环定时器 this.timer = setInterval(this.getAllValue, 5000); }, //销毁定时器 beforeDestroy:function() { clearInterval(this.timer); }, } ..
vue清除定时器
weixin_43492777的博客
12-14 149
this.$once(‘hook:beforeDestroy’, () => { clearInterval(timer); })
vue路由切换定时器仍在执行？？
weixin_30832405的博客
05-15 1168
今天在做项目时发现路由切换了但是定时器仍在执行，首先想到要找到一个合适的时机清除掉定时器，经查阅vue生命周期后得知该问题解决方案 参考文章：包你理解---vue 的生命周期 最终解决方法，在beforeDestroy(组件销毁前调用)中清除定时器 1 beforeDestroy(){ // 组件销毁前调用 2 clearTimeout(this.timer) 3 ...
vue编程式跳转，定时器使用，裁剪公共组件，路由传参
crazyFengGan的博客
06-25 476
vue编程式跳转，定时器使用，裁剪公共组件，路由传参vue编程式跳转裁剪公共组件路由跳转定时器清除路由传参 vue编程式跳转 语法： this . $ router.push({path:’/’}) 路由跳转除了在template编写router-link外，也可以在js使用$route.push编程跳转 裁剪公共组件 在vue中公共组件一般放在app.vue中，比如导航栏。。。 在路由跳转...
关于vue-router路由跳转与setInterval的问题解决方案
风清扬道场
03-25 643
关于vue-router路由跳转与setInterval的问题 Tip: 其实没打算发文章，主要是玩掘金块一年了，总想混点经验 let a = 3 this.timeInterval = setInterval(() => { a-=1 if(a >= 0){ this.$router.push('/router'); } }, 1000) 以上代码中有一个router跳转，虽然跳转了页面，但
解决vue-router 嵌套路由没反应的问题
10-14
在本文中，我们将深入探讨如何解决Vue Router中嵌套路由无响应的问题，以便更好地理解和应用这一强大功能。 首先，让我们回顾一下提供的代码片段。在`route.js`中，我们定义了一个路由配置数组，其中包括一个根路由...
Vue-Router的使用方法
12-11
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home...
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
解决vue项目router切换太慢问题
01-19
问题定位： 随着项目增大，有一天突然发现页面切换时候，要等1-2s页面才切换过去，然后就开始定位问题，刚开始以为时页面组件太多导致的，通过删除组件，发现没啥改善，然后就在两个页面打印日志，第二页面created周期时间和路由切换时间相差不大，可以排除是页面渲染耗时。然后在第一个页面的destroyed周期里面打印日志，发现destroyed->router切换耗时1.5s左右，这时候定位问题是vue的destroyed周期耗时。 destroyed周期耗时： 这时候就考虑destroyed为啥要那么久，这时候就很纳闷，第一反应肯定是页面组件太多，这是把组件都删了，还是很慢，然后页面就剩下一个表
vue中通过router路由进行跳转的页面，写的定时器无法清除，该如何解决？
Missbelover的博客
05-25 1924
如何清除定时器？ 例如：在vue页面中写了一个定时器，并且离开当前页面，在**beforeDestory()**方法中进行了清除，但是定时器并未清除，还在继续执行，这种情况该如何解决？ data() { return { timer : null } } created(){ this.currTime = 0; this.timer = setInterval(() => { this.currTime++; },
路由跳转后，setInterval没有销毁
shengsaihong的博客
01-13 907
最近项目碰到需要实时刷新数据的问题，使用了setInterval实现，发现路由跳转之后，组件被销毁了，但是setInterval还没有销毁，还在继续后台调用，如果运行量大的话，会导致严重的页面卡顿。 解决办法：在组件生命周期beforeDestroy中清除定时器 beforeDestroy(){ clearInterval(this.timer) } 但是在路由包含在keep-alive里的时候，beforeDestroy()不会执行 ...
vue使用定时器更新时间造成的页面卡顿
qq_32058147的博客
03-30 4308
最近做一个大屏可视化项目，用定时器加延时器写时间同步更新功能，刚开始以为很简单就完事了，后面客户反应时间一场页面就卡顿，最后排查原因，原来是计时器长时间调用引发内存泄漏， 后面优化了一下，果断没问题 错误写法 先是定义一个getData函数 ， 用来获取当前时分秒，日期， ( moment 函数我就不说了吧 ， 一款日期格式化插件 ， npm 可以下载) 再到mounted 定义一个计时器，计时器里调用getData函数 实时更新时间，虽然需求是达到了，但是长时间不关闭看看，页面肯...
vue单页应用中，使用setInterval()定时向服务器获取数据，后来跳转页面后，发现还在不停的获取数据。...
dianerwei7833的博客
12-07 805
使用VUE开发单页项目时遇到这样的问题，mounted中使用setInterval()定时向服务器获取数据，后来跳转页面后，发现还在不停的获取数据。我以为是因为我路由用的push导致的，改成replace也是这样，后来就在博客园找到答案了，如下： http://www.cnblogs.com/zzbp/p/5834110.html 问题：(javascript)使用Vuejs + V...
vue-router与setInterval的问题
qq_19306197的博客
10-12 991
今天在vue-router中使用setInterval时，发现一个问题：在A页面触发setInterval方法，跳转到B页面时，A的setInterval方法仍然继续执行， 解决方法：setInterval方法会返回一个id，在触发setInterval方法时保存这个id，然后在页面摧毁时（beforedestory)执行clearInterval方法， mounted () {
在vue中，使用setInterval()方法
热门推荐
沿华的博客
01-05 4万+
mounted() {             this.getElevatorList();             setInterval(this.getElevatorList, 15000);         } 在mounted（）函数里边使用setInterval(),       getElevatorList()这个方法在methods里边写，在mounted钩子函数里边
vue定时刷新及清除定时器
qq_43432157的博客
01-27 4799
首先确认< router-view >外层是否有包裹了一层< keep-alive > 如果有包裹： <template> <div> <keep-alive> <router-view /> </keep-alive> </div> </template> 在data中： data () { return { timer: null // 定
vue-router import 报错
最新发布
12-05
这种情况通常是由于导入方式不正确或者vue-router的安装出现了问题。 首先，我们需要确认我们是使用了正确的导入方式。在使用vue-router时，我们应该使用以下方式导入： ```javascript import Vue from 'vue'; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值