当前位置：首页 > VUE

vue定时器简单实现

2026-03-06 18:35:00VUE

在Vue中实现定时器的简单方法

使用setInterval或setTimeout创建定时器，注意在组件销毁时清除定时器避免内存泄漏

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

使用Vue的`$once`方法自动清理

利用Vue实例的$once监听钩子函数，实现自动清除定时器

mounted() {
  const timer = setInterval(() => {
    // 定时器逻辑
  }, 1000)

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

使用Composition API实现

在Vue3中使用setup和生命周期钩子实现定时器

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

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

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

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

    return { count }
  }
}

封装可复用的定时器逻辑

创建可复用的定时器函数，便于在多个组件中使用

vue定时器简单实现

// utils/timer.js
export function useInterval(callback, delay) {
  const savedCallback = ref()

  savedCallback.value = callback

  onMounted(() => {
    function tick() {
      savedCallback.value()
    }
    if (delay !== null) {
      let id = setInterval(tick, delay)
      onBeforeUnmount(() => clearInterval(id))
    }
  })
}

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

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

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

    return { count }
  }
}