当前位置：首页 > VUE

vue 计时器实现

2026-01-22 23:23:40VUE

Vue 计时器实现方法

使用 setInterval 实现基础计时器

在 Vue 组件的 data 中定义计时器变量和当前时间：

data() {
  return {
    timer: null,
    seconds: 0
  }
}

在 methods 中创建开始、暂停和重置方法：

methods: {
  startTimer() {
    this.timer = setInterval(() => {
      this.seconds++
    }, 1000)
  },
  pauseTimer() {
    clearInterval(this.timer)
  },
  resetTimer() {
    this.seconds = 0
    clearInterval(this.timer)
  }
}

在模板中添加控制按钮：

<template>
  <div>
    <p>{{ seconds }} 秒</p>
    <button @click="startTimer">开始</button>
    <button @click="pauseTimer">暂停</button>
    <button @click="resetTimer">重置</button>
  </div>
</template>

使用 computed 属性格式化显示时间

添加计算属性将秒数转换为更易读的时分秒格式：

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

更新模板使用格式化后的时间：

<p>{{ formattedTime }}</p>

使用生命周期钩子管理计时器

在组件销毁时清除计时器，防止内存泄漏：

beforeDestroy() {
  clearInterval(this.timer)
}

使用 Vue 3 Composition API 实现

对于 Vue 3 项目，可以使用 Composition API：

import { ref, onBeforeUnmount } from 'vue'

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

    const startTimer = () => {
      timer = setInterval(() => {
        seconds.value++
      }, 1000)
    }

    const pauseTimer = () => {
      clearInterval(timer)
    }

    const resetTimer = () => {
      seconds.value = 0
      clearInterval(timer)
    }

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

    return {
      seconds,
      startTimer,
      pauseTimer,
      resetTimer
    }
  }
}

添加倒计时功能

实现一个从指定时间开始的倒计时：

data() {
  return {
    timer: null,
    remainingTime: 60 // 60秒倒计时
  }
},
methods: {
  startCountdown() {
    this.timer = setInterval(() => {
      if (this.remainingTime > 0) {
        this.remainingTime--
      } else {
        clearInterval(this.timer)
        alert('时间到！')
      }
    }, 1000)
  }
}

这些方法提供了在 Vue 中实现计时器的不同方式，可以根据项目需求选择适合的实现方案。

vue 计时器实现