vue3倒计时

解决方案

在Vue3项目中实现倒计时功能，通常有多种方式。一种是利用JavaScript的setInterval()方法来定时更新数据，配合Vue3的响应式特性；另一种则是使用第三方库如dayjs或date-fns来进行更复杂的时间处理和格式化。

思路一：基于setInterval原生实现

这是一种比较基础的方式。

在组件的<script setup>部分定义所需变量：
```vue

import { ref, onMounted, onUnmounted } from 'vue'

// 设置目标时间戳（此处为1小时后）
const targetTime = Date.now() + 3600 * 1000

// 定义剩余时间对象
const timeLeft = ref({
hours: 0,
minutes: 0,
seconds: 0
})

let intervalId = null

// 计算剩余时间函数
function updateTime() {
const now = Date.now()
const diff = targetTime - now

if (diff > 0) {
timeLeft.value = {
hours: Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
seconds: Math.floor((diff % (1000 * 60)) / 1000)
}
} else {
clearInterval(intervalId)
timeLeft.value = {hours: 0,minutes: 0,seconds: 0}
}
}

onMounted(() => {
updateTime()
intervalId = setInterval(updateTime, 1000)
})

onUnmounted(() => {
clearInterval(intervalId)
})

```

然后在模板里展示倒计时：
vue
<template>
<div>
剩余时间：{{timeLeft.hours}} : {{timeLeft.minutes}} : {{timeLeft.seconds}}
</div>
</template>


思路二：使用dayjs库

先安装dayjs：
bash
npm install dayjs


编写代码如下：

```vue

import { ref, onMounted, onUnmounted } from 'vue'
import dayjs from 'dayjs'

const endTime = dayjs().add(1,'hour') // 设置结束时间为当前时间加1小时
const countdown = ref('')

function updateCountdown() {
const duration = dayjs.duration(endTime.diff(dayjs()))
countdown.value = `${String(duration.hours()).padStart(2,'0')}:${String(duration.minutes()).padStart(2,'0')}:${String(duration.seconds()).padStart(2,'0')}`
if(duration.asSeconds(){
updateCountdown()
timer = setInterval(updateCountdown,1000)
})

onUnmounted(()=>{
clearInterval(timer)
})

```
这两种思路都能很好地实现vue3中的倒计时功能，可以根据实际需求选择合适的方式。