在Vue中,除了`beforeDestroy`生命周期钩子函数,还有哪些方法可以在组件销毁时清理定时器?

简介: 在Vue中,除了`beforeDestroy`生命周期钩子函数,还有哪些方法可以在组件销毁时清理定时器?

除了在 beforeDestroy 生命周期钩子函数中清除定时器,还可以通过路由拦截和 $once 一次性侦听事件来实现。

示例如下:

  1. 在组件内设置定时器,并存储由 setInterval() 返回的 ID 值:
    // 组件中保存定时器
    this.testSetinterval = setInterval(() => {
         
      setTimeout(() => {
         
        console.log('test clearInterval')
      }, 0)
    }, 2000)
    
  2. 拦截前端路由,在组件内的 beforeDestroy 钩子函数中清除定时器:
    router.beforeEach((to, from, next) => {
         
      clearInterval(this.testSetinterval)
    })
    
  3. 通过 $once 一次性侦听一个事件,在组件内的 beforeDestroy 钩子函数中清除定时器:
    mounted () {
         
      const that = this
      // 组件中保存定时器
      this.testSetinterval = setInterval(() => {
         
        setTimeout(() => {
         
          console.log('test clearInterval')
        }, 0)
      }, 2000)
      // 监听 beforeDestroy 事件
      this.$once('hook:beforeDestroy', () => {
         
        clearInterval(that.testSetinterval)
      })
    }
    

上述三种方法都可以在组件销毁时清除定时器,你可以根据自己的需求选择适合的方法。

相关文章
|
10月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
794 2
|
9月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
667 137
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
837 1
|
12月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
586 0
|
JavaScript
vue 的实例生命周期
vue 的实例生命周期
165 0
|
JavaScript 前端开发 开发者
vue实例、指令、生命周期
vue实例、指令、生命周期
205 1
|
JavaScript
08Vue - Vue实例(实例生命周期)
08Vue - Vue实例(实例生命周期)
146 0
08Vue - Vue实例(实例生命周期)
|
JavaScript
vue 的实例生命周期
vue 的实例生命周期
|
JavaScript
vue实例的生命周期
vue实例的生命周期
162 0