如何用 ref 实现一个可复用的计时器逻辑？Composition API 封装实战-Vue.js-PHP中文网

用 ref 封装可复用计时器逻辑，返回响应式 timeLeft、isRunning 及 start、pause、reset 等控制函数，并通过 onUnmounted 清理定时器；支持毫秒精度、自定义回调及 progress 计算属性，适用于验证码、倒计时等多场景。

如何用 ref 实现一个可复用的计时器逻辑？composition api 封装实战

用 ref 实现可复用计时器逻辑，核心是把状态（如剩余时间、运行状态）和操作（启动、暂停、重置）封装进一个函数，返回响应式引用和控制函数，便于在多个组件中直接解构使用。

封装基础计时器：ref + setInterval

用 ref 管理时间值和开关状态，配合 onUnmounted 清理定时器，避免内存泄漏：

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  {
timeLeft.value--
if (timeLeft.value </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>

支持毫秒级精度与自定义回调

实际项目中常需更细粒度控制或触发副作用（如倒计时结束通知），可在封装中加入回调参数：

用 ref 存储毫秒级剩余时间（如 msLeft），提升精度
接收 onTick 和 onFinish 回调，在对应时机执行
将 setInterval 改为 setTimeout 递归调用，避免累积误差

扩展功能：可暂停/恢复的倒计时（含进度百分比）

若需展示进度条或动态计算完成比例，可额外暴露 progress 计算属性（注意：Composition API 中需用 computed）：

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>

在组件中使用：简洁解构，即插即用

无需额外逻辑，直接导入并调用，响应式变量自动更新 UI：

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

不复杂但容易忽略细节：务必清理定时器、区分「暂停」和「停止」语义、根据场景选择秒级或毫秒级精度。封装后，同一个 useTimer 可在登录验证码、表单防抖、活动倒计时等多个场景复用。