vue中页面缓存后destroyed失效，如何关闭定时器

最新推荐文章于 2024-08-20 14:46:34 发布
最新推荐文章于 2024-08-20 14:46:34 发布
阅读量2.8k 收藏 5
点赞数 1
分类专栏： Vue 文章标签： vue 关闭定时器 destroyed 失效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lifangfang0607/article/details/112321649
版权
在Vue应用中，若页面设置定时器且被keep-alive缓存，会导致destroyed钩子不触发，无法关闭定时器，影响性能。解决方案是在deactivated钩子中关闭定时器，以确保组件被缓存时也能正确管理定时任务。
摘要由CSDN通过智能技术生成

场景

页面中设置了定时器，如果组件销毁是没有关闭定时器，他还会一直执行，会非常耗性能，所以需要及时关闭定时器。

关闭定时器

vue项目中，正常情况下，我们在生命周期 destroyed 中关闭即可，一旦页面中使用了keep-alive 进行缓存，此时 destroyed 会失效。需要在 deactivated 钩子函数去关闭，他是 keep-alive 特有的钩子函数。

代码

没有缓存页面：

destroyed(){
   
	clearInterval(this.timer)
}

缓存过的页面：


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  sunshine0670
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
vue开发中遇到的一些问题及解决方案

				
			

			

				

					xiubinxu的博客
				

				

					11-15
					
					2016
					
				

			

		

		

			
				
Case 1
vue项目在IE中自动读取缓存中的数据，不重新发请求
解决方案：
// 在每个请求上增加时间戳
config.url = `${config.url}?_t=${+new Date()}`




			
		

	



                

              
                



	

		

			

				
					
前端vue经典面试题78道（重点详细简洁）

				
			

			

				

					weixin_59519449的博客
				

				

					03-21
					
					7万+
					
				

			

		

		

			
				
1.自我介绍

2分钟，200-300个字，主旨自己基本情况，工作经历，优点，兴趣爱好，职业规划，邀约

2.vue面试题

1.v-show和v-if区别的区别：

v-show通过css display控制显示和隐藏，v-if组件真正的渲染和销毁，而不是显示和隐藏，频繁切换状态使用v-show 否则v-if

2.为何v-for要用key

快速查找到节点，减少渲染次数，提升渲染性能

3.描述vue组件声明周期mm

单组件声明周期图

挂载： beforeCreate => created =

			
		

	



                


  
              

                


	

		

			

				
					
解决vue页面DOM操作不生效的问题

				
			

			

				

					08-27
				

			

		

		

			
				
下面小编就为大家分享一篇解决vue页面DOM操作不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
vue3生命周期总结

				
			

			

				

					前端小菜鸟也有人起的博客
				

				

					08-20
					
					264
					
				

			

		

		

			
				
vue3生命周期总结

			
		

	



		

			
		



	

		

			

				
					
vue2 使用keepalive 缓存页面失效，jeecg踩坑日记

				
			

			

				

					aaaarrrrrr的博客
				

				

					07-11
					
					1195
					
				

			

		

		

			
				
二级菜单开启菜单缓存后页面正常缓存，但是三级菜单开启缓存后，缓存时而有效时而无效.

			
		

	





	

		

			

				
					
vue页面缓存失效问题解决

				
			

			

				

					吴小迪的博客
				

				

					06-09
					
					2172
					
				

			

		

		

			
				
前端技术栈用的是vue，然后用keep-alive组件进行缓存页面【切换页面不进行刷新页面，保留之前的查询条件及状态等等】如果你不知道什么是正确的name的话可以在keep-alive那里把name显示的debug出来看。方案一：直接删除name的声明【一定是vue3.2.34+的版本才可以用这个方法】所以到这里基本上就排查到了问题应该就是组件的name错了所以导致缓存无效了。，如果是3.2.34+的版本就无需给组件声明name。方案二：将组件的name改成正确的。

			
		

	





	

		

			

				
					
解决vue-router4缓存页与不缓存页切换失效的问题

				
			

			

				

					weixin_55510188的博客
				

				

					10-14
					
					1772
					
				

			

		

		

			
				
路由配置中，name要唯一且和组件名称要相同，否则缓存无效。keepAlive用于说明该组件是否缓存。这样会存在一个问题，当从缓存页切到不缓存页，再从不缓存页返回到缓存页时，缓存失效，缓存页会重新加载。还是按照官方的方法来吧，使用include属性。

			
		

	





	

		

			

				
					
vue项目中清除定时器（清除定时器不成功）

				
			

			

				

					qq_45447899的博客
				

				

					01-17
					
					7264
					
				

			

		

		

			
				
首先确认< router-view >外层是否有包裹了一层< keep-alive >
如果有包裹：
<template>
  <div>
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template&gt...

			
		

	





	

		

			

				
					
vue setInterval 定时器失效的解决方式

				
			

			

				

					11-19
				

			

		

		

			
				
本文将深入探讨Vue中定时器的正确使用方法以及如何解决定时器失效的问题。  ### Vue中的定时器使用  #### 1. 数据绑定（Data Binding）  首先，我们通常会在`data`选项中声明一个变量来保存定时器的ID，例如：  ```...

			
		

	





	

		

			

				
					
2023年最新的Vue全套面试题（含答案）

					
热门推荐

				
			

			

				

					xm1037782843的博客
				

				

					03-06
					
					14万+
					
				

			

		

		

			
				
前端Vue面试题 最新面试题 最全的面试题vue

			
		

	





	

		

			

				
					
浅谈Vue页面级缓存解决方案feb-alive(上)

				
			

			

				

					12-11
				

			

		

		

			
				
feb-alive
github地址
体验链接
使用理由
  开发者无需因为动态路由或者普通路由的差异而将数据初始化逻辑写在不同的钩子里beforeRouteUpdate或者activated
  开发者无需手动缓存页面状态，例如通过localStorage或者sessionStorage缓存当前页面的数据
  feb-alive会帮你处理路由meta信息的存储与恢复
为什么开发feb-laive？

当我们通过Vue开发项目时候，是否会有以下场景需求？
  /a跳转到/b
  后退到/a时候，希望从缓存中恢复页面
  再次跳转到/b时，分两种情况
    情况一: 通过链接或者push跳转，

			
		

	





	

		

			

				
					
vue中destroyed方法的使用说明

				
			

			

				

					10-15
				

			

		

		

			
				
主要介绍了vue中destroyed方法的使用说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
解决Vue中的生命周期beforeDestory不触发的问题

				
			

			

				

					10-15
				

			

		

		

			
				
主要介绍了解决Vue中的生命周期beforeDestory不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
el-dialog弹窗表单使用 destroy-on-close 无效（不能将数据和验证情况）的bug解决

				
			

			

				

					учёба
				

				

					05-29
					
					4041
					
				

			

		

		

			
				
在使用el-dialog时，需要将弹窗里面的表单内容及校验规则清空，查询了element-ui发现了方法不能将数据等清空。

			
		

	





	

		

			

				
					
vue中，无缓存/缓存场景下组件定时器的销毁问题

				
			

			

				

					m0_37710874的博客
				

				

					03-24
					
					774
					
				

			

		

		

			
				
1.无缓存场景
    data() {
        return {
            timer: null
        }
    },
    created() {
        this.timer = setInterval(..., 1000);
    },
    beforeDestroy() {
        clearInterval(this.time...

			
		

	





	

		

			

				
					
el-dialog 的各种正确使用姿势 以及 el-dialog destroy-on-close 无效的解决办法

				
			

			

				

					唐唐唐行的博客
				

				

					09-29
					
					1万+
					
				

			

		

		

			
				
el-dialog 的各种正确使用姿势 以及 el-dialog destroy-on-close 无效的解决办法

			
		

	





	

		

			

				
					
记录vue destroyed clearInterval失败引起的bug

				
			

			

				

					grr1640610995的博客
				

				

					07-02
					
					345
					
				

			

		

		

			
				
问题描述

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





问题分析





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



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



可能的原因：

不等加载完成快速切换到其他页面，这样导致通过mounted执行的函数loadCPUMemoryData与d

			
		

	





	

		

			

				
					
vue定时器刷新页面后失效怎么解决

					
最新发布

				
			

			

				

					09-10
				

			

		

		

			
				
在Vue中，如果遇到定时器刷新页面后失效的问题，可以考虑以下几个方面来解决：

1. 清除定时器：在Vue组件销毁的时候，应该清除所有在组件内设置的定时器。这样可以防止定时器在Vue实例被销毁后还继续运行，从而避免可能出现的错误或者不必要的资源消耗。

2. 使用Vue的生命周期钩子：在Vue组件的`mounted`钩子中设置定时器，并在`beforeDestroy`钩子中清除定时器。这样可以确保定时器只在Vue实例的生命周期内有效。

3. 重新计算定时器触发条件：如果页面刷新改变了某些条件，需要在定时器触发之前重新计算并设置条件，以确保定时器的行为符合预期。

示例代码如下：

```javascript
<template>
  <!-- ... -->
</template>

<script>
export default {
  // ...
  data() {
    return {
      timer: null,
    };
  },
  mounted() {
    this.initTimer();
  },
  beforeDestroy() {
    this.clearTimer();
  },
  methods: {
    initTimer() {
      this.timer = setInterval(() => {
        // 执行定时器任务
      }, 1000);
    },
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    // 重置定时器的方法
    resetTimer() {
      this.clearTimer();
      this.initTimer();
    },
  },
};
</script>
```

在上述代码中，`initTimer` 方法用于初始化定时器，`clearTimer` 方法用于清除定时器。`mounted` 钩子中调用 `initTimer`，`beforeDestroy` 钩子中调用 `clearTimer`。如果需要在定时器中更新Vue实例的数据，确保在数据更新之后调用 `this.resetTimer()` 来重置定时器。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值