在 Vue 3 中，用 watch 监听倒计时归零需定义响应式 ref 变量、用 setInterval 每秒递减并清空定时器，watch 回调中严格判断 newVal === 0 && oldVal > 0 以精准触发领取奖励，避免重复执行。
在 Vue 3 中，用 watch 监听倒计时归零（即值变为 0）并触发领取奖励回调，关键在于：监听响应式倒计时变量、精准判断归零时机、避免重复触发。下面分几步说明实际写法和注意事项。
定义响应式倒计时并启动递减逻辑
先确保倒计时是一个响应式 ref（比如 ref(60)），并在合适时机（如组件挂载后）启动定时器递减：
- 使用
ref创建可响应的countdown - 用
setInterval每秒减 1，减到 0 时清除定时器 - 不推荐用
setTimeout递归，容易因异步延迟导致误差或多次触发
用 watch 精确监听归零瞬间
watch 默认是浅监听，对数字类型足够用。重点是只在「从非零变为 0」时执行回调，防止组件重渲染或 count 为 0 后反复触发：
- 监听
countdown，启用immediate: false（默认即可） - 在回调中判断
newVal === 0 && oldVal > 0，确保是真正归零时刻 - 避免写成
if (newVal === 0)—— 如果初始值就是 0 或后续手动设为 0，会误触发
完整示例代码（组合式 API）
以下是在 setup() 中的典型写法：
立即学习“前端免费学习笔记（深入）”；
import { ref, watch, onUnmounted } from 'vue'
<p>export default {
setup() {
const countdown = ref(30)
let timer = null</p><pre class='brush:php;toolbar:false;'>// 启动倒计时
const startCountdown = () => {
if (timer) clearInterval(timer)
timer = setInterval(() => {
countdown.value--
if (countdown.value <= 0) {
countdown.value = 0
clearInterval(timer)
timer = null
}
}, 1000)
}
// 监听归零并触发领取
watch(countdown, (newVal, oldVal) => {
if (newVal === 0 && oldVal > 0) {
handleClaimReward()
}
})
const handleClaimReward = () => {
console.log('✅ 倒计时结束，执行领取奖励逻辑')
// 这里调用接口、弹窗、更新状态等
}
// 组件卸载时清理定时器
onUnmounted(() => {
if (timer) clearInterval(timer)
})
return {
countdown,
startCountdown
}} }
补充建议：更健壮的处理方式
如果业务要求高可靠性（比如网络请求失败需重试、防抖、用户切页暂停等），可进一步优化：
- 把倒计时逻辑封装成可复用的 composable（如
useCountdown） - 归零后禁用领取按钮，并置灰 UI，防止用户重复点击
- 领取回调中加 loading 状态和错误捕获，失败时提示并允许重试
- 若涉及服务端时间，避免纯前端倒计时，应以服务端返回的截止时间为准，前端做同步校准
