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

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

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

<script setup>
import { useTimer } from './useTimer'
<p>const { timeLeft, isRunning, start, pause, reset } = useTimer(30)</p><p>// 模板中可直接用 {{ timeLeft }}、{{ isRunning }}
</script></p><p><template>
<div>{{ timeLeft }}s</div>
<button @click="start" v-if="!isRunning">开始</button>
<button @click="pause" v-else>暂停</button>
<button @click="reset">重置</button>
</template></p>