当前位置：首页 > VUE

vue记录时长前端实现

2026-03-27 01:27:42VUE

实现思路

前端记录时长通常涉及计时器、状态管理和持久化存储。Vue的响应式系统和生命周期钩子能很好地支持这类需求。

基础计时功能

使用setInterval和data属性实现基础计时：

data() {
  return {
    seconds: 0,
    timer: null
  }
},
methods: {
  startTimer() {
    this.timer = setInterval(() => {
      this.seconds++
    }, 1000)
  },
  stopTimer() {
    clearInterval(this.timer)
  }
},
mounted() {
  this.startTimer()
},
beforeDestroy() {
  this.stopTimer()
}

持久化存储

结合localStorage实现关闭页面后仍保留计时：

data() {
  return {
    seconds: localStorage.getItem('timerSeconds') || 0
  }
},
watch: {
  seconds(newVal) {
    localStorage.setItem('timerSeconds', newVal)
  }
}

格式化显示

使用计算属性美化时间显示：

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

使用Vuex管理状态

对于复杂应用，建议使用Vuex集中管理计时状态：

// store.js
state: {
  timer: 0
},
mutations: {
  INCREMENT_TIMER(state) {
    state.timer++
  }
},
actions: {
  startTimer({ commit }) {
    setInterval(() => {
      commit('INCREMENT_TIMER')
    }, 1000)
  }
}

性能优化

对于精确计时，建议使用requestAnimationFrame：

vue记录时长前端实现

methods: {
  startTimer() {
    let lastTime = performance.now()
    const update = () => {
      const now = performance.now()
      if (now - lastTime >= 1000) {
        this.seconds++
        lastTime = now
      }
      this.animationFrame = requestAnimationFrame(update)
    }
    this.animationFrame = requestAnimationFrame(update)
  },
  stopTimer() {
    cancelAnimationFrame(this.animationFrame)
  }
}