Vue定时器清除和设置
侧边栏壁纸
  • 累计撰写 23 篇文章
  • 累计收到 72 条评论
Vue

Vue定时器清除和设置

Zuiet
2024-03-07 / 0 评论 / 156 阅读 / 正在检测是否收录...

方法一:使用生命周期函数beforeDestory

  data() {
    return {
      timer: null
    }
  },
  methods: {
    getList().then(res => {
      this.timer = setInterval(() => {
        console.log('1s打印')
      },1000)
    })
  },
  beforeDestory() {
    clearInterval(this.timer)
    this.timer = null
  }

方法二:使用hook:beforeDestory

created() {
  let timer = setInterval(() => {
    console.log('1s打印')
  },1000);
  this.$once('hook:beforeDestory', () => {
    clearInterval(this.timer)
    timer = null
  })
}

使用hook的优势在于无需在vue实例上定义定时器,减少不必要的内存浪费而且设置和清除定时器的代码放在一块,可读性维护性更好

0

评论 (0)

取消