vue3定时器的清除

两个思路

1，通过vue的生命周期函数

这里我们用 onBeforeUnmount 实例卸载之前被调用的生命周期函数

  //引入生命周期函数
  import { onBeforeUnmount }  from  'vue'

     state.timer //定义变量，保存实例
     state.timer = setInterval(() => {

       // 逻辑代码

        }, 60000)
      })



    //清除
    onBeforeUnmount(() => {
      clearInterval(state.timer)
      state.timer = null
    })

2.通过路由变化使用watch去监听

// 引入路由 和 watch 侦听器
import { useRoute } from "vue-router"
import { watch} from "vue"


const route = useRoute()



  watch(
      () => route ,
      newVal => {
       //这里的判断条件按实际需求填写
        if (newVal) {
          
          // 清除定时器
      clearInterval(state.timer)
      state.timer = null

        }
      },
      { deep: true }
    )

vue3定时器的清除

悦读