useCountdown是Vue 3中封装验证码倒计时的组合式函数，接收初始秒数，返回响应式time和start方法，自动清理定时器、防连点、支持重置与暂停，并可持久化。
Vue 3 中处理验证码冷却倒计时，核心是把“倒计时状态 + 启动逻辑 + 清理机制”抽成独立、可复用的组合式函数。它不依赖具体 UI，只暴露响应式数据和控制方法，让组件专注渲染和交互。
useCountdown：标准封装结构
组合式函数必须以 use 开头，接收初始秒数（如 60），返回 time（当前剩余秒数）和 start（启动倒计时）两个关键项：
-
time用ref声明，确保响应式更新 -
start内部检查是否已在运行，避免重复定时器 - 使用
onBeforeUnmount或onUnmounted自动清理定时器，防止内存泄漏 - 倒计时归零后自动重置
time.value并清除定时器 ID
防连点与状态同步
实际业务中不能只靠倒计时数值判断是否可点击，还要加一个显式开关：
- 用另一个
ref（如isRunning）标识当前是否处于倒计时中 - 按钮禁用逻辑同时绑定
!isRunning.value && time.value === 60 - 调用
start()前先设isRunning.value = true，结束时设为false - 这样即使用户快速连点，也不会触发多次请求或多个定时器
支持外部中断与重置
真实场景需要灵活干预倒计时，比如请求失败后手动停止、或用户切换页面后恢复状态：
立即学习“前端免费学习笔记（深入）”；
- 在返回对象中增加
reset()方法，直接清空定时器并还原time.value - 增加
pause()（可选），暂停而不重置，适合表单暂存场景 - 如果需跨组件/页面保持倒计时（如刷新不丢失），可结合
localStorage或useStorage组合式函数持久化剩余时间
在组件中简洁使用
组件内只需三步：引入、调用、绑定：
const { time, start, reset } = useCountdown(60)<button :disabled="time !== 60">{{ time === 60 ? '发送' : `${time}秒后重发` }}</button>- 请求成功后调用
start()；失败后调用reset()
