当前位置：首页 > VUE

vue实现setinterval计数

2026-01-18 20:25:20VUE

Vue 实现 setInterval 计数的方法

在 Vue 中实现 setInterval 计数功能，可以通过以下几种方式实现。需要注意在组件销毁时清除定时器，以避免内存泄漏。

vue实现setinterval计数

方法一：在 `mounted` 钩子中启动定时器

<template>
  <div>计数: {{ count }}</div>
</template>

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

方法二：使用 `methods` 封装定时器逻辑

<template>
  <div>计数: {{ count }}</div>
</template>

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

方法三：使用 Vue 3 Composition API

<template>
  <div>计数: {{ count }}</div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue'

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

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

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

    return {
      count
    }
  }
}
</script>

方法四：使用 Vue 3 的 `watchEffect`

<template>
  <div>计数: {{ count }}</div>
</template>

<script>
import { ref, watchEffect } from 'vue'

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

    watchEffect((onInvalidate) => {
      const timer = setInterval(() => {
        count.value++
      }, 1000)

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

    return {
      count
    }
  }
}
</script>