Vue如何优雅的清除定时器

 更新时间:2021年07月22日 11:38:05   作者:8号的凌晨4点  
定时器如果不及时合理地清除,会造成业务逻辑混乱甚至应用卡死的情况,这个时就需要清除定时器,本文就介绍了Vue如何优雅的清除定时器,感兴趣的可以了解一下

前言

清除定时器,相信有相当一部分人是这么写的:

export default {
  data() {
    reurn {
      timer: null
    }
  },
  
  mounted() {
    this.timer = setInterval(() => {
      console.log('setInterval')
    }, 2000)
  },
  
  beforeDestroy() {
    clearInterval(this.timer)
  }
}

这是一段常见的代码,至少我身边的好几个小伙伴(1-3年经验的都有)都是这么写的,这里存在3个不优雅的问题:

  • clearInterval 后没有清空 timer 为 null。
  • 开启定时器和清除定时器的代码分散开在两个地方,有损可读性/维护性,用尤大大的话说,这使得我们比较难于程序化地清理我们建立的东西。
  • timer 被定义在 data 里,实际上 timer 不需要什么响应式操作,定义在 data 里是没必要的,反而造成性能浪费。

优化

直接上代码:

export default {
  data() {
    reurn {
    }
  },
  
  mounted() {
    let timer = setInterval(() => {
      console.log('setInterval')
    }, 2000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
      timer = null
    })
  }
}

这里使用 hook 监听 beforeDestroy 生命周期,这样 timer 只需被定义在生命周期里,以上的问题就全部解决了。

衍生问题:beforeDestroy 没有触发?

在后台系统中,我们常常会设置页面缓存,而当路由被 keep-alive 缓存时是不走 beforeDestroy 生命周期的,所以有些小伙伴以为在 beforeDestroy 清除定时器就完事了,甚至都没有检查一下,实际上定时器并没有被清除掉。知道了原因也就好解决了,借助 activated 和 deactivated 这两个生钩子:

export default {
  data() {
    reurn {
    }
  },
  
  mounted() {
    let timer = setInterval(() => {
      console.log('setInterval')
    }, 2000)
    this.$on('hook:activated', () => {
      if (timer === null) { // 避免重复开启定时器
        timer = setInterval(() => {
          console.log('setInterval')
        }, 2000)
      }
    })
    this.$on('hook:deactivated', () => {
      clearInterval(timer)
      timer = null
    })
  }
}

这里需要注意一下,由于缓存原因,所以需要用 $on 而不是 $once,不然执行一次后就不会再触发了。

到此这篇关于Vue如何优雅的清除定时器的文章就介绍到这了,更多相关Vue 清除定时器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue监听对象及对象属性问题

    vue监听对象及对象属性问题

    这篇文章主要介绍了vue监听对象及对象属性问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • vue在index.html中引入静态文件不生效问题及解决方法

    vue在index.html中引入静态文件不生效问题及解决方法

    这篇文章主要介绍了vue在index.html中引入静态文件不生效问题及解决方法,本文给大家分享两种原因分析,通过实例代码讲解的非常详细 ,需要的朋友可以参考下
    2019-04-04
  • vue-cli3.X快速创建项目的方法步骤

    vue-cli3.X快速创建项目的方法步骤

    这篇文章主要介绍了vue-cli3.X快速创建项目的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue prop传值类型检验方式

    vue prop传值类型检验方式

    这篇文章主要介绍了vue prop传值类型检验方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue多选列表组件深入详解

    Vue多选列表组件深入详解

    这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下
    2021-03-03
  • 用Vue写一个分页器的示例代码

    用Vue写一个分页器的示例代码

    本篇文章主要介绍了用Vue写一个分页器的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Vue.js实现一个漂亮、灵活、可复用的提示组件示例

    Vue.js实现一个漂亮、灵活、可复用的提示组件示例

    这篇文章主要介绍了Vue.js实现一个漂亮、灵活、可复用的提示组件示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • Vue 全家桶实现移动端酷狗音乐功能

    Vue 全家桶实现移动端酷狗音乐功能

    这篇文章主要介绍了Vue 全家桶实现移动端酷狗音乐功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • Vue 源码分析之 Observer实现过程

    Vue 源码分析之 Observer实现过程

    这篇文章主要介绍了 Vue 源码分析之 Observer实现过程,Observer 最主要的作用就是实现了touch -Data(getter) - Collect as Dependency这段过程,也就是依赖收集的过程,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-03-03
  • vue组件初学_弹射小球(实例讲解)

    vue组件初学_弹射小球(实例讲解)

    下面小编就为大家带来一篇vue组件初学_弹射小球(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论