当前位置：首页 > VUE

vue定时器简单实现

2026-03-27 03:36:10VUE

使用 `setInterval` 实现定时器

在 Vue 中可以通过 setInterval 实现简单的定时器功能。在组件的 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)
  }
}

使用 `setTimeout` 实现单次定时器

如果需要单次延迟执行，可以使用 setTimeout。

vue定时器简单实现

export default {
  data() {
    return {
      timer: null
    }
  },
  mounted() {
    this.timer = setTimeout(() => {
      console.log('延迟执行')
    }, 1000)
  },
  beforeDestroy() {
    clearTimeout(this.timer)
  }
}

使用 Vue 3 的 Composition API

在 Vue 3 中，可以使用 onMounted 和 onUnmounted 生命周期钩子结合 ref 实现定时器。

vue定时器简单实现

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

封装可复用的定时器逻辑

可以将定时器逻辑封装为可复用的函数，方便在多个组件中使用。

// utils/timer.js
export function useTimer(callback, interval) {
  let timer = null

  const start = () => {
    timer = setInterval(callback, interval)
  }

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

  return { start, stop }
}

// 在组件中使用
import { useTimer } from '@/utils/timer'

export default {
  setup() {
    const { start, stop } = useTimer(() => {
      console.log('定时器执行')
    }, 1000)

    onMounted(start)
    onUnmounted(stop)
  }
}