当前位置：首页 > VUE

vue实现setinterval

2026-01-07 18:47:18VUE

在 Vue 中使用 setInterval

Vue 中可以通过生命周期钩子和方法结合 setInterval 实现定时任务。以下是一个完整的实现示例：

<template>
  <div>
    <p>计数器: {{ count }}</p>
    <button @click="startTimer">开始</button>
    <button @click="stopTimer">停止</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      timer: null
    }
  },
  methods: {
    startTimer() {
      if (this.timer) return
      this.timer = setInterval(() => {
        this.count++
      }, 1000)
    },
    stopTimer() {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

关键点说明

存储 timer 引用
将 setInterval 返回的 timer ID 存储在组件数据中，便于后续清除。
组件销毁时清理
在 beforeDestroy 生命周期钩子中清除定时器，避免内存泄漏。
手动控制启停
通过 startTimer 和 stopTimer 方法提供手动控制能力。

进阶用法 - 封装为可复用逻辑

可以通过 Vue 的 composition API（Vue 3）或 mixin（Vue 2）封装定时器逻辑：

// Vue 3 composition API
import { ref, onUnmounted } from 'vue'

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

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

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

  onUnmounted(stop)

  return { start, stop }
}

使用示例

import { useInterval } from './useInterval'

export default {
  setup() {
    const count = ref(0)
    const { start, stop } = useInterval(() => {
      count.value++
    }, 1000)

    return { count, start, stop }
  }
}