使用 ref 封装可复用计时器逻辑实战

import { ref, onUnmounted } from 'vue'
export function useTimer(duration = 60) {
const timeLeft = ref(duration)
const isRunning = ref(false)
let timer = null
const start = () => {
if (isRunning.value || timeLeft.value <= 0) return
isRunning.value = true
timer = setInterval(() => {
timeLeft.value--
if (timeLeft.value <= 0) {
clearInterval(timer)
isRunning.value = false
}
}, 1000)
}
const pause = () => {
if (isRunning.value) {
clearInterval(timer)
isRunning.value = false
}
}
const reset = (newDuration = duration) => {
pause()
timeLeft.value = newDuration
}
// 组件卸载时自动清理
onUnmounted(() => {
if (timer) clearInterval(timer)
})
return {
timeLeft,
isRunning,
start,
pause,
reset
}
}

import { ref, computed } from 'vue'
// 在 useTimer 内部添加：
const progress = computed(() => {
return ((duration - timeLeft.value) / duration) * 100
})
return {
timeLeft,
isRunning,
progress, // 如 0～100 的数值
start,
pause,
reset
}