倒计时组件需结合时间戳与页面可见性监听实现精准校准：onMounted注册visibilitychange监听，状态切回visible时用targetTime.value-Date.now()重算剩余时间；采用链式setTimeout替代setInterval，onBeforeUnmount清除监听与定时器。
倒计时组件在页面切到后台时容易失准，根本原因是浏览器对隐藏标签页中的 setInterval 或 setTimeout 进行节流——定时器可能几秒才触发一次，甚至暂停。Vue 3 中不能只依赖“每秒减 1”，而要结合时间戳 + 页面可见性监听，实现真正响应式的校准。
用 document.visibilityState 感知页面状态
这是校准的前提。Vue 3 组件中应在 onMounted 时注册监听，检测从 hidden 切回 visible 的瞬间：
- 监听
visibilitychange事件，检查document.visibilityState === 'visible' - 当状态由
'hidden'变为'visible'时，立即重新计算剩余时间：remaining = Math.max(0, targetTime - Date.now()) - 避免重复校准，可用 ref 缓存上一次 visibility 状态做比对
倒计时逻辑必须基于目标时间戳，而非递减计数器
不要用 counter.value-- 这类纯递减方式。正确做法是：
- 把截止时间（如后端返回的
endTime: '2026-09-20T14:00:00'）转为毫秒时间戳，存为响应式 ref（如targetTime） - 定时器内不维护“当前秒数”，而是每次执行时实时计算：
const remainingMs = targetTime.value - Date.now() - 再将毫秒转为天、时、分、秒等格式显示，确保任意时刻都精准
定时器策略：用 setTimeout 替代 setInterval 更稳妥
虽然 setInterval 看似简单，但在页面不可见时恢复运行易造成跳秒或错位。推荐使用链式 setTimeout：
立即学习“前端免费学习笔记（深入）”；
- 每次执行后，计算下一次更新时间点：
nextTick = Math.max(0, remainingMs % 1000) - 再设
setTimeout(() => { /* 更新UI */ }, nextTick) - 这样既能保持视觉平滑，又能在 visibility 恢复时自然衔接，无需手动清理旧定时器
组件卸载前务必清除监听与定时器
防止内存泄漏和意外触发：
- 用
onBeforeUnmount清除visibilitychange事件监听器 - 同时
clearTimeout或clearInterval当前活跃的定时器句柄 - 若使用自定义 Hook 封装，建议在内部统一管理这些清理逻辑，对外暴露 clean 方法
