vue 计时器实现
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 中实现计时器的不同方式，可以根据项目需求选择适合的实现方案。
