vue记录时长前端实现
实现思路
前端记录时长通常涉及计时器、状态管理和持久化存储。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：
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)
}
}注意事项
- 页面最小化时部分浏览器会降低定时器精度
- 移动端浏览器可能为省电暂停后台页面计时
- 长时间运行需考虑整数溢出问题
- 多标签页同时运行时需使用BroadcastChannel同步状态
