useTimer 封装响应式计时器，以 ref 管理状态与定时器 ID，支持启动、暂停、重置、倒计时、自定义步长及运行/完成状态监听，并在卸载时自动清理，规避闭包陷阱与内存泄漏。

用响应式 ref 封装计时器 Hooks，核心是把 ref 作为状态容器 + 手动控制定时器生命周期，避免闭包陷阱和内存泄漏。关键不在“多酷”，而在“可中断、可重置、不重复启动、响应式更新”。

封装一个基础响应式计时器（useTimer）

使用 ref 存储定时器 ID 和当前秒数，配合 onUnmounted 清理，确保组件卸载时自动停止：

• 定义 time = ref(0) 和 timer = ref(null)，两者都需响应式暴露（返回对象解构时用 toRefs 或直接返回 ref）
• 提供 start()：先清除已有定时器，再用 setInterval 每秒递增 time.value
• 提供 pause()：清除定时器但保留当前值
• 提供 reset()：清空定时器并重置 time.value = 0
• 在 onUnmounted 中调用 pause()，防止组件销毁后继续运行

支持自定义步长与倒计时（增强实用性）

基础版只支持正向秒级计时，实际项目常需毫秒精度、倒计时、或按指定步长（如每 500ms 加 1）更新：

• 接收参数 options = { step = 1000, mode = 'countup' | 'countdown', duration = 60 }
• 倒计时模式下，start() 初始化 time.value = duration，每次递减 step / 1000（单位统一为秒）
• 用 Math.max(0, time.value - step / 1000) 防止负值，并在归零时自动 pause()
• 所有数值操作保持对 time.value 的直接响应式更新，无需额外 triggerRef

暴露控制状态与事件回调（提升可组合性）

仅暴露数值不够 —— 用户常需知道“是否正在运行”、“是否已结束”，或在特定时刻执行逻辑：

• 返回 isRunning = computed(() => timer.value !== null) 和 isFinished = computed(() => time.value
• 支持传入 onFinish: () => void 回调，在倒计时归零时触发（注意：在 pause() 前调用，避免被清理拦截）
• 若需监听时间变化做副作用（如触发动画），建议用户用 watch(() => time.value, ...)，而非在 Hook 内硬编码

避免常见陷阱（实操避坑指南）

响应式 ref 计时器看似简单，但几个细节极易出错：

• 不要在 start() 里直接写 setInterval(() => time.value++) —— 闭包会捕获旧的 time 引用，导致更新无效；应访问 time.value 实时值
• 不要用 setTimeout 递归模拟定时器 —— 累积误差大，且难以精确暂停；优先用 setInterval + clearInterval
• 重置后再次 start() 必须先 clearInterval，否则可能残留多个定时器
• 如果组件可能频繁挂载/卸载（如 v-if 切换），确保 onUnmounted 清理逻辑稳定执行，推荐用 onBeforeUnmount 更早介入