当前位置：首页 > VUE

vue实现定时器

2026-02-24 02:58:12VUE

使用 `setInterval` 实现定时器

在 Vue 中可以通过 setInterval 创建定时器，但需要注意在组件销毁时清除定时器以避免内存泄漏。

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

使用 `setTimeout` 实现循环定时器

通过递归调用 setTimeout 可以实现类似 setInterval 的效果，但能更灵活控制每次执行的间隔。

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    startTimer() {
      setTimeout(() => {
        this.count++
        console.log('定时器执行', this.count)
        this.startTimer() // 递归调用
      }, 1000)
    }
  },
  mounted() {
    this.startTimer()
  }
}

使用 Vue 的 `$once` 自动清理定时器

结合 Vue 的生命周期钩子和 $once 方法，可以更优雅地管理定时器的清理。

vue实现定时器

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

    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
    })
  }
}

使用 Composition API 实现定时器

在 Vue 3 的 Composition API 中，可以使用 onUnmounted 钩子来清理定时器。

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

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

    onMounted(() => {
      timer = setInterval(() => {
        count.value++
        console.log('定时器执行', count.value)
      }, 1000)
    })

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

    return { count }
  }
}

封装可复用的定时器 Hook

对于 Vue 3 项目，可以封装一个可复用的定时器 Hook。

vue实现定时器

// useInterval.js
import { onUnmounted } from 'vue'

export function useInterval(callback, delay) {
  const timer = setInterval(callback, delay)

  const stop = () => {
    clearInterval(timer)
  }

  onUnmounted(() => {
    stop()
  })

  return { stop }
}

// 在组件中使用
import { useInterval } from './useInterval'

export default {
  setup() {
    const count = ref(0)

    const { stop } = useInterval(() => {
      count.value++
      console.log('计数:', count.value)
    }, 1000)

    return { count, stop }
  }
}