vue 计时器实现

实现 Vue 计时器的基本方法

在 Vue 中实现计时器功能可以通过多种方式完成，以下是常见的几种实现方法。

使用 setInterval 实现计时器

通过 JavaScript 的 setInterval 方法可以创建一个简单的计时器。在 Vue 中，可以将计时器的逻辑封装在组件的 data 和 methods 中。

<template>
  <div>
    <p>{{ time }}</p>
    <button @click="startTimer">开始</button>
    <button @click="stopTimer">停止</button>
    <button @click="resetTimer">重置</button>
  </div>
</template>

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

使用 Vue 的计算属性优化显示

如果需要将秒数格式化为更友好的时间格式（如 HH:MM:SS），可以使用计算属性。

<template>
  <div>
    <p>{{ formattedTime }}</p>
    <button @click="startTimer">开始</button>
    <button @click="stopTimer">停止</button>
    <button @click="resetTimer">重置</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: 0,
      timer: null
    }
  },
  computed: {
    formattedTime() {
      const hours = Math.floor(this.time / 3600)
      const minutes = Math.floor((this.time % 3600) / 60)
      const seconds = this.time % 60
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
    }
  },
  methods: {
    startTimer() {
      if (!this.timer) {
        this.timer = setInterval(() => {
          this.time++
        }, 1000)
      }
    },
    stopTimer() {
      clearInterval(this.timer)
      this.timer = null
    },
    resetTimer() {
      this.stopTimer()
      this.time = 0
    }
  },
  beforeDestroy() {
    this.stopTimer()
  }
}
</script>

使用 Vue 3 的 Composition API

在 Vue 3 中，可以使用 Composition API 实现计时器功能，代码更加模块化和可复用。

<template>
  <div>
    <p>{{ formattedTime }}</p>
    <button @click="startTimer">开始</button>
    <button @click="stopTimer">停止</button>
    <button @click="resetTimer">重置</button>
  </div>
</template>

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

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

    const formattedTime = computed(() => {
      const hours = Math.floor(time.value / 3600)
      const minutes = Math.floor((time.value % 3600) / 60)
      const seconds = time.value % 60
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
    })

    const startTimer = () => {
      if (!timer.value) {
        timer.value = setInterval(() => {
          time.value++
        }, 1000)
      }
    }

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

    const resetTimer = () => {
      stopTimer()
      time.value = 0
    }

    onBeforeUnmount(() => {
      stopTimer()
    })

    return {
      formattedTime,
      startTimer,
      stopTimer,
      resetTimer
    }
  }
}
</script>

使用第三方库

如果需要更复杂的计时器功能，可以考虑使用第三方库，如 vue-timer-hook。

安装库：

npm install vue-timer-hook

使用示例：

<template>
  <div>
    <p>{{ formattedTime }}</p>
    <button @click="start">开始</button>
    <button @click="pause">暂停</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script>
import { useTimer } from 'vue-timer-hook'

export default {
  setup() {
    const timer = useTimer(0, false)
    const formattedTime = `${timer.hours.value.toString().padStart(2, '0')}:${timer.minutes.value.toString().padStart(2, '0')}:${timer.seconds.value.toString().padStart(2, '0')}`

    return {
      formattedTime,
      start: timer.start,
      pause: timer.pause,
      reset: timer.reset
    }
  }
}
</script>

注意事项

• 在组件销毁时，务必清除计时器以避免内存泄漏。
• 如果需要高精度计时器，可以考虑使用 requestAnimationFrame 替代 setInterval。
• 对于需要持久化的计时器，可以将计时器的状态保存在 Vuex 或 Pinia 中。