Vue倒计时组件详解

一、Vue实现倒计时

在Vue中实现倒计时功能，一般使用Vue的计算属性来实现。采用计算属性，可以有效避免在数据改变后的重复渲染，提高代码的效率。

<template>
  <div>
    <p>{{ countDownTime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startTime: 60 // 自定义开始时间
    }
  },
  computed: {
    countDownTime() {
      setInterval(() => {
        this.startTime--;
      }, 1000)
      return this.startTime;
    }
  }
}
</script>

上述代码中，我们在计算属性中利用setInterval来实现倒计时功能。同时，我们设置了开始时间startTime为60秒，在每次执行计算属性时，startTime会减1直到0秒为止。

二、Vue实现倒计时组件

如果我们需要在多个页面、多个组件中复用倒计时功能，这时我们需要创建一个Vue倒计时组件。下面是一个简单的Vue倒计时组件：

<template>
  <div>
    <p>{{ countDownTime }}</p>
  </div>
</template>

<script>
export default {
  name: 'count-down',
  props: {
    time: {
      type: Number,
      default: 60 // 默认时间60秒
    }
  },
  data() {
    return {
      startTime: this.time
    }
  },
  computed: {
    countDownTime() {
      setInterval(() => {
        this.startTime--;
      }, 1000)
      return this.startTime;
    }
  }
}
</script>

这个倒计时组件包含一个计算属性countDownTime，用于计算倒计时时间；同时接收一个props参数time，用于设定倒计时时间。使用该组件时，只需要在父组件中引入该组件并传入倒计时时间即可。

三、Vue验证码倒计时

验证码倒计时可以在短信验证、邮件验证、注册等场景中使用。对于验证码倒计时，我们需要的是一段能够倒计时的时间，并且在时间结束后，重新获取验证码。下面是一个Vue实现的验证码倒计时组件：

<template>
  <div>
    <p v-if="!isCount"><a href="javascript:;" @click="startCountDown">获取验证码</a></p>
    <p v-else>{{ countDownTime }} 秒后重新获取</p>
  </div>
</template>

<script>
export default {
  name: 'code-count-down',
  data() {
    return {
      countDownTime: 60, // 默认时间60秒
      isCount: false
    }
  },
  methods: {
    startCountDown() {
      this.isCount = true;
      const timer = setInterval(() => {
        this.countDownTime--;
        if (this.countDownTime === 0) {
          clearInterval(timer);
          this.countDownTime = 60;
          this.isCount = false;
        }
      }, 1000)
    }
  }
}
</script>

以上的代码中，我们通过使用v-if和v-else对计时状态进行了判断。如果计时没有开始，则显示获取验证码按钮；如果计时开始了，则显示倒计时时间，并且倒计时时间结束后，重新显示获取验证码按钮。在组件中，我们使用了一个isCount变量来记录倒计时状态，使用countDownTime来记录时间状态。

四、Vue组件里的倒计时定时器

在Vue中使用定时器来实现倒计时功能，需要注意一些细节问题。下面是在Vue组件中使用定时器时的一些注意事项：

1. 避免多次开启倒计时

在设置定时器时，需要在使用定时器前将定时器清空，否则将会出现多个定时器同时执行的情况，导致数据混乱。

startTimer() {
  if (!this.timer) { // 判断定时器是否存在，避免多次开启定时器
    this.timer = setInterval(() => {
      this.countDownTime--;
      if (this.countDownTime === 0) {
        this.stopTimer(); // 定时器结束后，及时清除定时器
      }
    }, 1000)
  }
},
stopTimer() {
  clearInterval(this.timer);
  this.timer = null; // 清空定时器
}

2. 避免Vue组件销毁后，定时器还在运行

在Vue组件销毁后，需要及时清除定时器，否则将成为内存泄漏的原因。

beforeDestroy() {
  clearInterval(this.timer);
  this.timer = null; // 清空定时器
}

3. 避免数据混乱

在倒计时组件中，如果使用了props参数，需要使用Vue的watch监听props参数变化，避免出现数据混乱。

watch: {
  time(newVal, oldVal) {
    if (newVal !== oldVal) {
      this.countDownTime = newVal;
    }
  }
}

五、Vue倒计时功能

Vue倒计时功能是一个非常常用的功能，一般用于统计时间，倒计时功能等场景。下面是一个Vue倒计时功能的组件：

<template>
  <div>
    <p>{{ countDownTime }}</p>
  </div>
</template>

<script>
export default {
  name: 'vue-count-down',
  props: {
    targetTime: {
      type: Number,
      default: 1609459200 // 默认时间为2021/1/1 00:00:00
    }
  },
  data() {
    return {
      remainingTime: ''
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      setInterval(() => {
        this.remainingTime = this.getRemainingTime();
      }, 1000)
    },
    getRemainingTime() {
      let targetTime = new Date(this.targetTime * 1000).getTime();
      let currentTime = new Date().getTime();
      let remainingTime = targetTime - currentTime;
      let seconds = Math.floor(remainingTime / 1000 % 60);
      let minutes = Math.floor(remainingTime / 1000 / 60 % 60);
      let hours = Math.floor(remainingTime / 1000 / 60 / 60 % 24);
      let days = Math.floor(remainingTime / 1000 / 60 / 60 / 24);
      return `${days}天${hours}小时${minutes}分${seconds}秒`;
    }
  }
}
</script>

该组件通过传入目标时间（时间戳），计算与当前时间的时间差，并通过计算获得剩余时间（天、小时、分钟、秒），并且每秒更新一次数据。使用该组件时，只需要传入目标时间戳即可。

六、Vue倒计时60秒

Vue倒计时60秒功能常用于一些简单的倒计时场景，例如：重新获取验证码等。下面是一个简单的Vue倒计时60秒组件：

<template>
  <div>
    <p>{{ countDownTime }}</p>
  </div>
</template>

<script>
export default {
  name: 'vue-count-down-60s',
  data() {
    return {
      countDownTime: 60 // 默认时间为60秒
    }
  },
  mounted() {
    setInterval(() => {
      this.countDownTime--;
    }, 1000)
  }
}
</script>

该倒计时组件使用了一个计算属性countDownTime，每隔一秒钟减一，直到倒计时结束。

七、Vue写倒计时一分钟

Vue写倒计时一分钟功能是一种非常简单的、易于实现的倒计时功能。下面是该种情况下的Vue倒计时组件：

<template>
  <div>
    <p>{{ countDownTime }}</p>
  </div>
</template>

<script>
export default {
  name: 'count-down-one-minute',
  data() {
    return {
      countDownTime: 60 // 默认时间为60秒
    }
  },
  mounted() {
    setInterval(() => {
      this.countDownTime--;
    }, 1000)
  }
}
</script>

该倒计时组件与Vue倒计时60秒类似，都是采用了计算属性来计算时间，并且每隔一秒钟减一，直到倒计时结束的方式来实现。

八、Vue实现验证码倒计时功能

验证码倒计时功能在之前的Vue验证码倒计时中有所涉及，本节中，我们将深入讨论Vue实现验证码倒计时功能的细节问题。

1. 定义状态变量

在Vue组件中，我们需要定义一个状态变量来控制验证码倒计时状态。该状态变量将用于记录倒计时的开始、暂停、重新开始等状态。

data() {
  return {
    countDownTime: 60, // 默认时间为60秒
    isCounting: false, // 是否正在倒计时
    timer: null // 定时器
  }
}

2. 开始倒计时

当用户点击获取验证码按钮时，将启动倒计时。在启动倒计时前，需要判断定时器是否存在，如果不存在，才可以开启定时器。同时，我们需要使用isCounting变量来记录倒计时的状态。

startCountDown() {
  if (!this.timer) { // 判断定时器是否存在，避免多次开启定时器
    this.isCounting = true;
    this.timer = setInterval(() => {
      this.countDownTime--;
      if (this.countDownTime === 0) {
        this.stopCountDown(); // 停止倒计时
      }
    }, 1000)
  }
}

3. 停止倒计时

在倒计时结束时，需要关闭定时器。同时，我们需要将状态变量isCounting设置为false，此时用户可以重新获取验证码。

stopCountDown() {
  clearInterval(this.timer);
  this.isCounting = false;
  this.timer = null; // 清空定时器
  this.countDownTime = 60; // 重新设置倒计时时间
}

4. 监听props参数变化

如果我们在倒计时组件中使用props参数来定义倒计时时间，需要使用Vue的watch监听props参数变化，并且在props参数变化时，重新设置倒计时时间。

watch: {
  time(newVal, oldVal) {
    if (newVal !== oldVal) {
      this.countDownTime = newVal;
    }
  }
}

九、Vue实现倒计时功能总结

通过上述的讲解，我们可以看到，Vue实现倒计时功能非常简单，只需要运用Vue的计算属性、props参数、定时器等特性，即可轻松实现一项复杂倒计时功能。</p