VUE3跳转页面时 定时器未清除解决

一,问题

1、在vue中使用setTimeout定时器的时候，可能会遇到关不掉的情况，会存在明明已经在beforeDestroy和destroyed中设置了定时器清除了，但是有时候没生效，定时器还会继续执行。
2、在这里需要说一下setTimeout的使用场景：
（1）需要执行一次定时的时候用得到，比如需要在多久之后执行的一次操作
（2）接口需要定时查询，并且需要在接口返回数据后再查询的情况下（接口定时查询的时候，该方式会经常用得到）
二、问题出现的原因
场景：目前有个接口方法，执行该方法需要5s执行完成，并且还需要在执行完后定时查询数据
问题原因分析：
（1）问题发生的场景

a. 该方法需要5s执行完，但是当执行到该方法中第2s的时候，切换页面的时候将该组件销毁了

b. 销毁了该组件，但是该方法还是会在缓存中执行往下执行，并不会因为组件销毁而停止执行后面的代码，所以后面的定时器还是会执行到，并且后续的定时器也会一直执行

c. 因为一直在缓存中执行，并且组件已经销毁了，所以定时器就会存在清不掉的情况
（2）这种情况是偶发性的，很少有需要执行5s的方法，为了将该问题复现测试，我测试的时候是自己模拟了一下这个场景，所以使用的是5s；大部分的情况可能是几十毫秒或者几百毫秒就可以执行完成了，但是在销毁的时候，恰好处于方法执行的过程中，就会导致定时器清不掉的情况

重要就是在切换页面时 定时器并未清除掉(已经在VUE2,beforeDestroy,destroyed  , VUE3 onBeforeUnmount,onUnmounted  中设置清除定时器方法但未生效)

解决方法 

使用 路由 导航守卫 监听页面跳转时清除

VUE2  (无需引入 直接书写)

  // destroyed() {
  //   clearInterval(this.timer);　　// 清除定时器
  // },  之前是这么写的

  // 将 destroyed() 改为 beforeRouteLeave()
  beforeRouteLeave(to, from, next) {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
      this.$refs.mychild.headerClearTimeFn();
    }
     //注意一定要next()让其跳转!!!
    next()
  }

VUE3  需要引入

import { onBeforeRouteLeave } from 'vue-router'



onBeforeRouteLeave((to, from, next) => {
    //清除定时器
       // ......
    next()
})

 

onBeforeRouteLeave(离开当前页面路由时触,return false则阻止跳转)、onBeforeRouteUpdate(路由更新时触发)

是vue-router提供的两个composition api，它们只能被用于setup中。