首页 > 其他分享 >Vue项目中定时器的问题...

Vue项目中定时器的问题...

时间:2022-11-03 00:44:36浏览次数:41  
标签:... 定时器 beforeDestroy timer Vue once

Vue项目中定时器的问题...

比如说 我们现在在a页面写一个定时,让他每秒钟处理操作,比如:每秒钟打印一个1,然后跳转到b页面,此时可以看到,定时器依然在执行。这样是非常消耗性能的。如下图所示:

       

解决方法1:

首先我在data函数里面进行定义定时器名称:

data() {            
    return {                              
        timer: null  // 定时器名称          
    }        
},

然后这样使用定时器:

this.timer = (() => {
    // 某些操作
}, 1000)

最后在beforeDestroy()生命周期内清除定时器:

beforeDestroy() {
    clearInterval(this.timer);        
    this.timer = null;
}
方案1有两点不好的地方,引用尤大的话来说就是:
  • 它需要在这个组件实例中保存这个 timer,如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题,但是它可以被视为杂物。
  • 我们的建立代码独立于我们的清理代码,这使得我们比较难于程序化的清理我们建立的所有东西

解决方案2:

该方法是通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器

const timer = setInterval(() =>{                    
    // 某些定时器操作                
}, 500);            
// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
})

 强烈推荐:$once、$on、$off的使用方法和场景

标签:...,定时器,beforeDestroy,timer,Vue,once
From: https://www.cnblogs.com/mahmud/p/16853085.html

相关文章

  • Java GUI编程(未完待续...)
    JavaGUIAWT1.组件和容器Frame弹出一个窗口packageuichuan;importjava.awt.*;importjava.awt.event.WindowAdapter;importjava.awt.event.WindowEvent;pu......
  • vue导入项目缺少依赖‘node_modules’
    从git下载好的项目,导入vue时提示‘node_modules’依赖则需要在你的项目包下面找是否有package-lock.json文件,如:如果有,但是依旧报错,直接删除package-lock.json文件,用终......
  • PostgreSQL查询引擎——create table xxx(...)基础建表流程
    CREATETABLEtable_name([{column_namedata_type[COLLATEcollation][column_constraint[...]]}[,...]])wherecolumn_constraintis:[CONSTRAINTco......
  • vue实现小汽车功能
    查看代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><me......
  • 【2022.11.2】Vue基础学习(7)
    内容详细1vue3介绍1.性能的提升打包大小减少41%初次渲染快55%,更新渲染快133%内存减少54%2.源码的升级使用Proxy代替defineProperty实现响应式......
  • js 四级联动,利用的vue 的v-model双向绑定
    数据格式为:  <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0......
  • vue3
    Vue3vue3介绍性能的提升​ 打包大小减少41%​初次渲染快55%,更新渲染快133%​内存减少54%源码的升级​ 使用Proxy代替defineProperty实现响应式​ 重写......
  • vue3
    vue3vue3介绍1.性能的提升打包大小减少41%初次渲染快55%,更新渲染快133%内存减少54%2.源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tre......
  • vue学习笔记
    今日内容概要vue3介绍创建vue3项目的方式setup函数ref和reactive计算和监听属性生命周期hookstoRefs后台管理模板今日内容详细vue3介绍1.性能的提升......
  • vite_vue3自动引入
    //github地址:https://github.com/antfu/unplugin-auto-import1.npmi-Dunplugin-auto-import2.vite.config.tsimportAutoImportfrom'unplugin-auto-import/vi......