vue3实现30分钟倒计时

可以使用Vue Composition API来实现一个简单的30分钟倒计时器。

首先，安装`vue@next`和`@vue/composition-api`依赖：

npm install vue@next @vue/composition-api

然后，在Vue组件中使用Composition API来实现逻辑。我们可以使用`ref`来创建响应式的计时器变量，并使用`setInterval`来每秒更新一次计时器。

以下是一个简单的实现：

<template>
  <div>
    {{ minutes }}:{{ seconds }}
  </div>
</template>

<script>
import { ref, onMounted } from '@vue/composition-api'

export default {
  setup() {
    const timer = ref(1800) // 30分钟，单位秒
    const minutes = ref('')
    const seconds = ref('')

    const formatTime = (time) => {
      return time < 10 ? `0${time}` : time
    }

    onMounted(() => {
      const interval = setInterval(() => {
        timer.value -= 1
        minutes.value = formatTime(Math.floor(timer.value / 60))
        seconds.value = formatTime(timer.value % 60)

        if (timer.value === 0) {
          clearInterval(interval)
        }
      }, 1000)
    })

    return {
      minutes,
      seconds,
    }
  },
}
</script>

在`setup()`函数中，我们创建了一个初始值为1800的`timer`变量，然后使用`onMounted`钩子在组件挂载后开始计时器。在计时器回调函数中，我们每秒减少1秒，并将计时器格式化为`minutes`和`seconds`变量，最后当计时器到达0时，清除计时器。

最后，在模板中展示`minutes`和`seconds`变量即可实现30分钟倒计时。