如何在Vue3中做一个简单的倒计时？

Question

我一直在尝试使用 Vue3 设置一个简单的倒计时，但我无法使其正常工作。这在 React 中很容易实现，但我根本不理解 Vue 中的逻辑（3）。所以，我想出了这个：

<script>
export default {
    data() {
        return {
            timer: 10,
            interval: ""
        }
    },
    emits: ["start-game"],
    methods: {
        startGame() {
            this.$emit("start-game")

            this.startTimer()
        },
        startTimer() {
            clearInterval(this.interval)

            while(this.timer != 0) {
                this.interval = setInterval(() => {
                    this.timer--
                }, 1000)
            }
        }
    }
}
</script>

您可能希望这会起作用，但它会造成无限循环。不知何故，你不能只在 vue 方法中使用 while。如果我删除 while 它实际上会无限期地倒计时，但是一旦计时器运行结束（命中 0），我需要其他功能来运行。 Vue 的处理方式是什么？

Answer 1

不要认为这与 React 或 Vue 有任何关系。您需要在 setInterval 回调中清除您的间隔，以便它知道何时停止。不需要 while 循环：

this.interval = setInterval(() => {
  if (this.timer === 0) {
    clearInterval(this.interval)                
  } else {
    this.timer--
  }             
}, 1000)

同时查看这个纯 js 示例：

let timer = 10;
let interval = setInterval(() => {
  if (timer === 0) {
    clearInterval(interval)                
  } else {
    timer--
    console.log(timer)
  }             
}, 1000)

Answer 2

我遇到了同样的麻烦，我非常高兴地做出反应 react-hook-timer 但 vue 3 中什么都没有。所以我让你有 3 个主要特征：

计时器
秒表
时间

对于您的用例，计时器是您所需要的，请按照以下步骤操作：

npm i vue-timer-hook

<script>
import { useTimer } from "vue-timer-hook";

export default {
   emits: ["start-game"],
   setup(props, { emit }) {
     const timer = useTimer(10 * 1000, false);
     const startGame = () {
        emit("start-game")
        timer.start()
     }
     return {
      startGame,
      timer,
     };
   },
}
</script>

https://github.com/riderx/vue-timer-hook

Answer 3

为了让它工作，我在 mount():

中做了这个

let this_ = this;  // to make this available as a closure
setInterval(() => {
    this_.$options.timer.bind(this_)();  // methods are available in $options, need to bind `this`
}, 1000)

如何在Vue3中做一个简单的倒计时？

How to make a simple countdown in Vue3?

vue.js

vuejs3