当前位置：首页 > VUE

vue中实现定时

2026-02-18 17:51:26VUE

Vue 中实现定时功能

在 Vue 中实现定时功能通常使用 setInterval 或 setTimeout，并结合 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 适用于单次延迟执行任务，同样需要在组件销毁时清除。

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

使用 Vue 3 的 Composition API

在 Vue 3 中，可以通过 onMounted 和 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）。

// Vue 3 自定义 Hook
import { ref, onUnmounted } from 'vue'

export function useInterval(callback, delay) {
  const intervalId = ref(null)

  const start = () => {
    intervalId.value = setInterval(callback, delay)
  }

  const stop = () => {
    if (intervalId.value) {
      clearInterval(intervalId.value)
      intervalId.value = null
    }
  }

  onUnmounted(stop)

  return { start, stop }
}

在组件中使用：

vue中实现定时

import { useInterval } from './useInterval'

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

    const { start, stop } = useInterval(() => {
      count.value++
    }, 1000)

    onMounted(start)

    return { count, stop }
  }
}