记录vue destroyed clearInterval失败引起的bug

最新推荐文章于 2023-02-23 16:12:24 发布
最新推荐文章于 2023-02-23 16:12:24 发布
阅读量338 收藏
点赞数 1
文章标签： css javascript html5 css3 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/grr1640610995/article/details/118419215
版权
本文探讨了在TRENDnetAP新版页面中，登录后快速切换页面导致Dashboard中的定时器未被正确释放的问题。分析指出，由于加载与销毁的同步问题，导致定时器在destroyed阶段未被清除。通过移除代码中的await，确保了定时器在销毁前创建，从而解决了问题。此问题涉及Vue应用生命周期管理和异步操作的优化。
摘要由CSDN通过智能技术生成

问题描述

TRENDnet AP新版页面，login后进入Dashboard页面，之后不等加载完成快速切换到其他页面，发现Dashboard中有一个周期性定时器timer未被释放，还在定时向后台请求数据（并非每次都能复现，但出现几率很高）

问题分析

修改前的代码，主要红框中的await

修改后的代码，将红框中的await移除，问题就被fix了，why？

可能的原因：

不等加载完成快速切换到其他页面，这样导致通过mounted执行的函数loadCPUMemoryData与destroyed同时执行。
修改前，由于loadCPUMemoryData有一个await阻塞了后面的this.timers创建，导致destroyed在执行clearInterval时，this.timers为null，之后this.timers被创建。
修改后，await被移除，destroyed在执行clearInterval时，this.timers不为null

冲动的碧根果
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中destroyed方法的使用说明
10-15
`destroyed` 方法是Vue组件生命周期中的一个重要钩子，它在组件实例被销毁之前调用。理解并正确使用`destroyed`方法可以帮助我们优化应用性能，避免资源浪费，并解决某些特定场景下的问题。 ### Vue组件的生命周期 ...
vue中页面缓存后destroyed失效，如何关闭定时器
qq_42351675的博客
03-10 1618
场景 页面中设置了定时器，如果组件销毁是没有关闭定时器，他还会一直执行，会非常耗性能，所以需要及时关闭定时器。 关闭定时器 vue项目中，正常情况下，我们在生命周期 destroyed 中关闭即可，一旦页面中使用了keep-alive 进行缓存，此时 destroyed 会失效。需要在 deactivated 钩子函数去关闭，他是 keep-alive 特有的钩子函数。 代码 没有缓存页面： destroyed(){ clearInterval(this.timer) } 缓存过的页面：
vue项目中beforeDestroy和destroyed 钩子不起作用或者说不生效的原因和解决办法
weixin_54256416的博客
02-23 7548
vue项目中beforeDestroy和destroyed 钩子不起作用或者说不生效的原因和解决办法
vue中页面使用缓存后destroyed失效，如何关闭定时器
蓝胖子的博客
10-11 2222
遇到的问题 页面中使用了定时器，关闭页面在destroyed中清除定时器，但destroyed没有生效。 关闭定时器 vue项目中，正常情况下，我们在生命周期 destroyed 中关闭即可，一旦页面中使用了keep-alive 进行缓存，此时 destroyed 会失效。需要在 deactivated 钩子函数去关闭，他是 keep-alive 特有的钩子函数。 代码 没有缓存页面： timer：在data中定义 --》用来接收定时器的 destroyed(){ clearInterval(this.t
vue中 $destroy 并且 removeChild 组件数据响失效
舜岳的博客
01-07 5917
this.$destroy() 作用: 完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。触发 beforeDestroy 和destroyed 的钩子。 当销毁一个组件时我们有可能会用这种方法： this.$destroy() this.$el.parentNode.removeChild(this.$el) //通过父级元素销毁当前组件 查看页面html该组件确实被销毁， 但是removeChild销毁组件只是表面上的销毁了该组件， 实际上该组件函数任然缓存在vue中，下次组件显
vue添加keep-alive缓存后,不能调用销毁(destroyed)事件,刷新或者关闭浏览器事件监听后调用接口(我这里是因为录像异常需要结束录像)
qq_62452129的博客
09-02 847
录像我使用的是webetc(延迟很低,换了很多种这种延迟最低),因为加了缓存后只能调用activated和deactivated,在这里就不再解释这俩生命周期是干什么用的了,因为关闭浏览器和刷新浏览器是同步事件,而调用接口是异步事件,在这里请求接口我使用的是axios,在执行完同步事件的时候,浏览器已经刷新了,并不会去调用异步操作,所以只能使用原生的获取事件。xhr.open('GET', '接口地址',true);// 这里必须是true,并且不可以删除 因为默认是false。// 切换录像已经结束。
vue props传值失败 输出undefined的解决方法
10-18
在使用Vue.js框架进行前端开发时，组件间的通信是核心功能之一。其中，props是父子组件之间传递数据的主要方式。但是，开发者在使用props进行数据传递时，可能会遇到值传递失败导致在子组件中输出undefined的情况。...
Vue 实现输入框新增搜索历史记录功能
10-16
在本文中，我们将深入探讨如何在Vue框架中实现一个搜索输入框功能，此功能将能够记录用户的搜索历史，并能够将这些历史记录显示给用户，同时提供清除历史记录的选项。为达成此功能，我们将采用一个名为good-storage...
vue init失败简单解决方法(终极版)
08-28
文章最后提到，类似“严格模式”的问题可能与模板或Vue CLI版本有关，如果你遇到因版本不兼容或模板中存在bug导致的问题，可能需要等待作者后续的解决方案或者考虑更换为其他稳定的模板。 总结来说，当`vue init`...
A毕业设计：Express+vue实现的bug管理系统
最新发布
03-17
1. **缺陷记录**：开发人员和测试人员可以使用Bug管理系统记录他们在软件开发和测试过程中发现的缺陷信息，如Bug描述、复现步骤、优先级、严重程度等。 2. **分配和跟踪**：每个Bug都会被分配给相应的开发人员或...
浏览器关闭网站移除本地存储localStorage，用vue的destroyed或者beforeDestroy函数无效
weixin_45654407的博客
07-30 3542
关闭浏览器或者关闭网页窗口的时候，需要移除token 在 App.vue挂载的时候，加上这个方法，浏览器关闭动作的事件 mounted () { window.addEventListener('beforeunload', () => { localStorage.removeItem('token') localStorage.removeItem('user') }); }, ............... vue的生命钩子函数destroyed
Vue中keep-alive 缓存desroyed()不能执行解决办法
Sun~Neo
04-12 858
父组件：使用<keep-alive>， <keep-alive exclude=""> <router-view @public_footer="public_footer"></router-view> </keep-alive> <app-footer v-if="isFooter"></app...
vue项目切换页面beforeDestory不触发解决方法
Hassanh的博客
07-08 6496
vue项目切换页面beforeDestory不触发解决方法 主要解决销毁当前页面实例时执行操作： 可以使用路由守卫方法： 使用组件内守卫： beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 this.ws.close(); //销毁时执行的代码 next() //允许跳转页面 }, ...
vue 加载时掉用mounted_vue 页面回退mounted函数不执行的问题及解决方法
weixin_39531037的博客
12-19 2317
前言最近做项目碰到一个很头大的问题--从a页面跳到b页面进行编辑，编辑完再返回a页面，却没走a页面的钩子函数mounted，数据没有更新经过一番面向百度研究，终于找到了问题所在。接下来就记录一下这个问题及其解决的方法。原理解决这个问题的关键就在于对keep-alive的理解和activated钩子函数的使用。当在项目中引入keep-alive的时候，页面第一次进入，钩子函数的触发顺序created...
Vue生命周期
m0_70314224的博客
09-18 630
创建vue实例之前：beforeCreate创建vue实例之后：created挂载前：beforeMount挂载后（初始渲染）：mounted这四个钩子只会执行一次。
vue页面刷新时，执行了哪些生命周期——谨慎使用beforeDestroy和destroyed
热门推荐
Annie的博客
06-08 2万+
在页面刷新时，并没有来得及执行destroy，与把页面关闭再重新打开的效果是一样的。
vue 关闭弹如何销毁子组件_Vue 子组件destroyed，但是子组件实例没有销毁(一个很有深度的问题）...
weixin_39616961的博客
12-20 2301
问题：在Vue中子组件执行destroyed钩子函数但是实例却没有销毁分享已经知道的内容：1、vue项目假设只有一级路由(vue-router),那么在一级路由中切换子组件(具体vue文件)，会执行vue文件中的destroyed，这时候我认为这个子组件销毁了2、vue文件中this表示的就是这个子组件的对象，在每次一级路由中切换这个子组件，那么会不断的创建新的this对象，销毁这个this对象实...
vue跳转路由时，定时器不能及时清空的问题
weixin_43794749的博客
08-19 758
该方法是通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。以下是完整代码： const timer = setInterval(() =>{ // 定时器操作 }, 500); // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。 this.$once('hook:beforeDestroy', () => { c.
vue destroyed
10-26
Vue的destroyed生命周期钩子是在Vue实例销毁之后调用的函数。当该钩子被调用后，对应Vue实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。这意味着页面无法再动态更新数据，也就是说无法数据驱动视图。在销毁阶段，自定义事件会失效，但原生DOM事件依然有效。销毁后，借助Vue开发工具看到的信息也会停止更新。总之，destroyed生命周期钩子是Vue实例生命周期的最后一个阶段，用于清理和释放Vue实例所占用的资源。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值