前端验证码节流倒计时

验证码登录，获取验证码的按钮是30秒获取一次，按钮点击后变成30秒倒计时，为0时恢复按钮可点击状态

<template>
  <div>
    <button :disabled="countDown > 0" @click="startCountDown">{{ countDown > 0 ? `${countDown}秒后重新获取` : '获取验证码' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countDown: 0,
      timer: null
    };
  },
  methods: {
    startCountDown() {
      // 如果倒计时已经开始，直接返回
      if (this.countDown > 0) {
        return;
      }

      // countDown === 0 说明恢复按钮状态，这里可以做发送验证码的逻辑
      
      // 开始倒计时
      this.countDown = 30;
      this.timer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--;
        } else {
          clearInterval(this.timer);
          this.timer = null; // 定时器必须手动置空，虽然定时器清除了，但是timer还是有值在的
        }
      }, 1000);
    }
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>

这段代码实现了一个获取验证码的倒计时按钮组件，下面是代码解释：
按钮状态控制：

1. 按钮通过:disabled属性绑定倒计时状态。当countDown > 0时按钮禁用，显示"X秒后重新获取"；
2. 倒计时结束后显示"获取验证码"。

倒计时逻辑：

1. 点击按钮触发startCountDown方法，首先检查是否已经开始倒计时，如果开始则中断执行，避免重复触发。
2. 初始化倒计时为30秒，启动setInterval定时器每秒减少countDown的值。
3. 定时器在倒计时结束时自动清除，并将timer变量置空，避免内存泄漏。

定时器的销毁-生命周期管理：

1. beforeDestroy钩子确保组件销毁时清除定时器，防止内存泄漏。