Vue ref 变量如何处理倒计时器组件中的秒数递减与暂停逻辑

正确做法是用 ref 存储目标时间戳并实时计算剩余毫秒数；暂停/恢复需控制定时器生命周期并修正时间差；更新应基于系统时间而非累减，且组件卸载时须清理定时器。

用 ref 管理倒计时核心状态

倒计时的秒数递减不能靠“每秒减 1”这种粗略累减，否则会因定时器延迟、JS 主线程阻塞或页面失焦导致跳秒甚至错乱。正确做法是：用 ref 存储目标时间戳（如 targetTime = Date.now() + 60000），再通过实时计算 targetTime - Date.now() 得到剩余毫秒数 remainingMs。这个 remainingMs 必须是 ref，才能触发响应式更新。

暂停/恢复的本质是控制定时器生命周期

暂停不是“把数字停住”，而是停止定时器；恢复是重新启动并同步修正时间差。关键点：

1. 用一个 isRunning = ref(false) 标记当前是否活跃
2. 暂停时调用 clearInterval(timerId.value)，并保存最后一次更新的时间戳（lastUpdate = Date.now()）
3. 恢复时，先计算已暂停时长，再从 remainingMs 中扣除，再启动新定时器
4. 不推荐只靠 setInterval(..., 1000)，建议用 100ms 或结合 requestAnimationFrame 提升感知精度

毫秒级更新需避免误差累积

单纯每 100ms 执行 remainingMs.value -= 100 会因执行延迟产生漂移。应每次更新都重新读取系统时间：

1. 在定时回调中记录当前 now = Date.now()
2. 计算本次应减少的毫秒数：delta = now - lastTimestamp.value
3. 更新：remainingMs.value = Math.max(0, remainingMs.value - delta)
4. 重置 lastTimestamp.value = now

组件卸载时必须清理资源

Vue 3 中使用 onBeforeUnmount 清除定时器，防止内存泄漏和后台继续执行：

1. 把 timerId = ref(null) 存在 setup 内部
2. 在 onBeforeUnmount(() => { clearInterval(timerId.value); }) 中统一清理
3. 若支持 visibilitychange（如标签页切走），也应在 document.addEventListener('visibilitychange', ...) 中联动暂停