Vue中验证码冷却需用响应式data+setInterval管理倒计时，按钮禁用与文案更新同步；倒计时归零时$emit('cooldown-end')通知父组件；须在组件销毁前清除定时器防泄漏；可封装为v-sms-countdown指令提升复用性。

Vue 中实现验证码冷却（如“60秒后可重发”）的事件同步，关键不是靠自定义事件本身来“驱动倒计时”，而是让倒计时逻辑与按钮状态、文本显示、点击行为形成闭环。自定义事件在这里主要起“通知作用”——比如通知父组件“验证码已发送”或“倒计时结束”，真正控制冷却的是响应式数据 + 定时器。

用 data + setInterval 管理倒计时状态

在组件内部维护一个 countdown 响应式数值，并用 setInterval 递减。同时控制按钮是否禁用、文案是否更新：

• 初始化时 countdown = 0，表示可点击
• 点击“获取验证码”后，设为 countdown = 60，启动定时器，按钮 :disabled="countdown > 0"
• 定时器每秒执行一次：countdown--；归零时清除定时器，并可触发自定义事件通知外部

通过 $emit 向外同步冷却完成信号

倒计时归零是重要业务节点，适合用自定义事件向外广播，方便父组件做后续处理（如自动聚焦输入框、启用提交按钮等）：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 在倒计时结束回调中调用：this.$emit('cooldown-end')（Vue 2）或 emit('cooldown-end')（Vue 3 Composition API）
• 父组件监听：@cooldown-end="onCooldownEnd"，执行对应逻辑
• 不建议用该事件“传递倒计时过程”，只用于关键状态跃迁（开始/结束）

避免常见陷阱：定时器泄漏与响应式失效

倒计时组件若被销毁（如路由切换、v-if 移除），未清理的 setInterval 会持续运行，造成内存泄漏和状态错乱：

立即学习“前端免费学习笔记（深入）”；

• Vue 2：在 beforeDestroy 钩子中 clearInterval(this.timer)
• Vue 3（setup）：在 onBeforeUnmount 中清理
• 不要把 countdown 放在非响应式对象里（如普通 const 变量），必须是 data() 返回或 ref() 声明

进阶：用自定义指令封装倒计时行为（复用性更强）

如果多个按钮都需要“发送验证码+倒计时”，可抽成指令（如 v-sms-countdown），接收初始值、结束文案、禁用类名等参数：

• 指令 bind 阶段绑定点击事件，触发发送并启动倒计时
• inserted 阶段设置初始文案，如 “获取验证码” → “60s”
• 倒计时结束时还原文案，并触发 el.dispatchEvent(new Event('cooldown-finish'))，由监听方处理