正确做法是用 ref 存储目标时间戳并实时计算剩余毫秒数；暂停/恢复需控制定时器生命周期并修正时间差；更新应基于系统时间而非累减，且组件卸载时须清理定时器。
用 ref 管理倒计时核心状态
倒计时的秒数递减不能靠“每秒减 1”这种粗略累减，否则会因定时器延迟、JS 主线程阻塞或页面失焦导致跳秒甚至错乱。正确做法是：用 ref 存储目标时间戳（如 targetTime = Date.now() + 60000），再通过实时计算 targetTime - Date.now() 得到剩余毫秒数 remainingMs。这个 remainingMs 必须是 ref，才能触发响应式更新。
暂停/恢复的本质是控制定时器生命周期
暂停不是“把数字停住”，而是停止定时器；恢复是重新启动并同步修正时间差。关键点：
- 用一个
isRunning = ref(false)标记当前是否活跃 - 暂停时调用
clearInterval(timerId.value)，并保存最后一次更新的时间戳（lastUpdate = Date.now()） - 恢复时，先计算已暂停时长，再从
remainingMs中扣除，再启动新定时器 - 不推荐只靠
setInterval(..., 1000)，建议用100ms或结合requestAnimationFrame提升感知精度
毫秒级更新需避免误差累积
单纯每 100ms 执行 remainingMs.value -= 100 会因执行延迟产生漂移。应每次更新都重新读取系统时间：
- 在定时回调中记录当前
now = Date.now() - 计算本次应减少的毫秒数：
delta = now - lastTimestamp.value - 更新：
remainingMs.value = Math.max(0, remainingMs.value - delta) - 重置
lastTimestamp.value = now
组件卸载时必须清理资源
Vue 3 中使用 onBeforeUnmount 清除定时器，防止内存泄漏和后台继续执行：
立即学习“前端免费学习笔记（深入）”；
- 把
timerId = ref(null)存在 setup 内部 - 在
onBeforeUnmount(() => { clearInterval(timerId.value); })中统一清理 - 若支持 visibilitychange（如标签页切走），也应在
document.addEventListener('visibilitychange', ...)中联动暂停
