useCountdown 封装倒计时逻辑，返回响应式 count、isRunning、isDisabled 及 start/reset 方法，支持自动清理、防连点、全局单例与 visibilityState 暂停续计，并可进一步封装为 useSmsCode 融合请求流程。
Vue 3 中实现验证码冷却（倒计时）逻辑抽象，核心是把“启动倒计时、防连点、自动清理、状态同步”这些重复行为封装成独立、可复用的组合式函数，避免每个页面都写一套 setInterval 和 clearInterval。
封装为 useCountdown 组合式函数
定义一个以 use 开头的函数，接收初始秒数（如 60），返回响应式倒计时值和控制方法：
- 内部用
ref管理当前剩余秒数，用let timer: number | null存储定时器 ID - 提供
start()启动倒计时：仅当未运行且值为初始值时才开始；启动后自动递减，归零时自动清空并重置 - 提供
reset()手动重置，用于发送失败或用户主动取消后恢复状态 - 在
onUnmounted中自动清除定时器，防止内存泄漏 - 支持传入回调函数，例如倒计时结束时触发重试或 UI 提示
防连点与状态联动
冷却逻辑不能只管时间，还要配合业务动作。常见做法是把“是否可点击”作为返回值之一：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 返回
isRunning: Ref<boolean></boolean>和isDisabled: Ref<boolean></boolean>，后者 =count.value ，供按钮 <code>:disabled="isDisabled"直接绑定 - 发送验证码前先校验手机号格式，再调用
countdown.start()；若接口失败，立即countdown.reset() - 不依赖外部变量控制开关，所有状态收束在组合函数内部，组件只需解构使用
支持跨组件共享与暂停
当多个模块（如登录页 + 注册页）共用同一手机号输入框时，倒计时需全局唯一：
- 用
const globalCountdown = useCountdown(60)在顶层创建单例实例 - 各组件通过
provide/inject或导出的全局实例访问，确保倒计时不会被重复触发 - 需要暂停时（如页面切到后台），监听
document.visibilityState，隐藏时clearInterval，显示时按剩余时间继续（需记录起始时间戳）
配合验证码发送流程封装
更进一步，可将倒计时与请求逻辑合并为 useSmsCode：
- 接收手机号 ref、发送类型（登录/注册）、API 函数
- 内部组合
useCountdown+useRequest（封装 loading/error） - 暴露
send()方法：自动校验、触发请求、成功则启动倒计时、失败则重置 - 返回
{ count, isSending, error, send }，组件解构即用，无额外胶水代码
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
