vue3定时器的清除

最新推荐文章于 2024-05-20 16:01:05 发布

陈十一i

最新推荐文章于 2024-05-20 16:01:05 发布

阅读量1.9k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/xu20166424/article/details/134530649

版权

两个思路

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 }
    )