当前位置：首页 > VUE

vue实现定时任务

2026-02-21 23:16:29VUE

在 Vue 中实现定时任务

Vue 中可以通过 setInterval 或 setTimeout 结合生命周期钩子实现定时任务。以下是具体实现方式：

使用 setInterval 实现循环任务

在组件的 mounted 钩子中启动定时器，并在 beforeDestroy 钩子中清除定时器以避免内存泄漏。

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

使用 setTimeout 实现延迟任务

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

export default {
  methods: {
    delayedTask() {
      setTimeout(() => {
        console.log('延迟任务执行')
      }, 3000)
    }
  },
  mounted() {
    this.delayedTask()
  }
}

使用 Vue 3 Composition API

在 Vue 3 中，可以使用 setup 函数和生命周期钩子实现定时任务。

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

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

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

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

    return { counter }
  }
}

使用第三方库

如果需要更复杂的定时任务管理，可以考虑使用第三方库如 vue-timer-hook。

安装库：

npm install vue-timer-hook

使用示例：

import { useTimer } from 'vue-timer-hook'

export default {
  setup() {
    const time = new Date()
    time.setSeconds(time.getSeconds() + 10) // 10秒定时器

    const timer = useTimer(time)

    return { timer }
  }
}