vue定时器简单实现

定时器基础实现

在Vue中使用setInterval和clearInterval实现定时器功能。在组件的data中定义计时器变量，mounted钩子中启动定时器，beforeDestroy钩子中清除定时器避免内存泄漏。

export default {
  data() {
    return {
      timer: null,
      count: 0
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.count++
      console.log('定时执行', this.count)
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}

方法封装实现

将定时器逻辑封装为可复用的方法，便于在多个地方调用和控制。

export default {
  data() {
    return {
      timer: null,
      isActive: false
    }
  },
  methods: {
    startTimer() {
      this.timer = setInterval(this.tick, 1000)
      this.isActive = true
    },
    stopTimer() {
      clearInterval(this.timer)
      this.isActive = false
    },
    tick() {
      console.log('定时执行')
    }
  }
}

使用Vue3 Composition API

Vue3的setup语法中使用onMounted和onUnmounted生命周期钩子实现定时器。

import { ref, onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    let timer = null

    onMounted(() => {
      timer = setInterval(() => {
        count.value++
      }, 1000)
    })

    onUnmounted(() => {
      clearInterval(timer)
    })

    return { count }
  }
}

使用第三方库

安装vue-timers插件简化定时器管理，自动处理组件销毁时的清理工作。

npm install vue-timers

import Vue from 'vue'
import VueTimers from 'vue-timers'

Vue.use(VueTimers)

export default {
  timers: {
    logTime: { time: 1000, autostart: true }
  },
  methods: {
    logTime() {
      console.log('每秒执行')
    }
  }
}

注意事项

定时器需要在组件销毁时手动清除，否则会导致内存泄漏。在Vue3中可以使用watchEffect自动清理副作用。

import { watchEffect } from 'vue'

watchEffect((onInvalidate) => {
  const timer = setInterval(() => {
    console.log('执行')
  }, 1000)

  onInvalidate(() => {
    clearInterval(timer)
  })
})