Vue创建倒计时器的诀窍与妙招，你学会了吗？

前端

2023-11-22 09:36:40

在前端开发中，倒计时器是一个非常常用的组件，它可以用于各种各样的场景，比如轮播图、抢购活动、投票等等。而在Vue中，我们也可以很容易地实现一个倒计时器。

Vue倒计时器实现方式

实现一个Vue倒计时器主要有两种方式，分别是：

computed+watch+data
setInterval+Vue钩子

下面我们就分别介绍这两种方式的实现原理和步骤。

1. computed+watch+data

使用computed+watch+data实现倒计时器，主要思想是利用computed计算出当前的倒计时时间，然后通过watch监听倒计时时间的变化，在倒计时时间变化时更新DOM。

具体实现步骤如下：

在Vue组件中定义一个data属性，用于存储倒计时的总时间。
在Vue组件中定义一个computed属性，用于计算当前的倒计时时间。
在Vue组件中定义一个watch，用于监听倒计时时间的变化。
在watch中，当倒计时时间变化时，更新DOM。

2. setInterval+Vue钩子

使用setInterval+Vue钩子实现倒计时器，主要思想是利用setInterval定时器每隔一段时间执行一次回调函数，在回调函数中更新倒计时时间。

具体实现步骤如下：

在Vue组件中定义一个data属性，用于存储倒计时的总时间。
在Vue组件中定义一个mounted钩子，用于在组件挂载时启动定时器。
在mounted钩子中，使用setInterval启动定时器，每隔一段时间执行一次回调函数。
在回调函数中，更新倒计时时间。

Vue倒计时器实例

下面我们通过一个实例来演示如何使用computed+watch+data实现一个Vue倒计时器。

<template>
  <div>
    <p>倒计时：{{ time }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalTime: 10 // 倒计时的总时间，单位为秒
    }
  },
  computed: {
    time() {
      // 计算当前的倒计时时间
      return this.totalTime - Math.floor((Date.now() - this.startTime) / 1000)
    }
  },
  watch: {
    time(newValue, oldValue) {
      // 当倒计时时间变化时，更新DOM
      if (newValue <= 0) {
        // 倒计时结束，发出警告
        alert('倒计时结束！')
      }
    }
  },
  mounted() {
    // 在组件挂载时启动定时器
    this.startTime = Date.now()
  }
}
</script>