vue beforeDestroy 清除定时器失效

Question

vue beforeDestroy 清除定时器失效

正常的路由跳转beforeDestroy是可以清除定时器的，但是我在父组件中定义了一个方法，当触发某条件就跳转到另一个页面，这种情况下子组件的beforeDestroy中的定时器失效了，但是beforeDestroy方法有调用，我打了console.

相关代码

    // 父组件 某条件触发路由跳转，定时器在/xxx中一直调用
    router.push('/xxx')
    
    
    // 子组件
    mounted() {
     this.timer = setInterval(()=>{
        this.heartbeat();
      },5000);
    },
    
    beforeDestroy(){
      // 页面离开时断开连接,清除定时器
      console.log( '------------' );
      clearInterval(this.timer);
    },

你期待的结果是什么？实际看到的错误信息又是什么？

正常清除定时器

Answer 1

使用程序化的事件侦听器，试试这个：

mounted: function () {
  var timer = setInterval(()=>{
    this.heartbeat();
  },5000);
  // 通过 $once 来监听定时器，在 beforeDestroy 钩子可以被清除。
  this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
  })
}

官方教程：https://cn.vuejs.org/v2/guide...