使用vue3 写一个定时器

核心逻辑：每隔一秒钟，对 countTime 进行减 1 操作

• resume：可执行函数，开启定时器，每隔一个时间执行一次
• pause： 可执行函数，只要执行这个函数，定时器就会暂停

<template>
  <div>
    {{ countTime }}
    <button @click="start">开始定时器</button>
    <button @click="pause">暂停定时器</button>
    <button @click="resume">继续定时器</button>
  </div>
</template>

<script>
import { useIntervalFn } from '@vueuse/core'
import { ref } from 'vue'

export default {
setup () {
    const run = (count) => {
      const countTime = ref(0)
      const { pause, resume } = useIntervalFn(() => {
      // pause 暂停定时器  resume
      // 如果时间小于0 暂停定时器  否则 就自减
        if (countTime.value <= 0) {
          pause()
        } else {
          countTime.value--
        }
      }, 1000)
      // 开始
      const start = () => {
      // 可以在开始的时候重新进行赋值 把传递过来的值 直接赋值
        countTime.value = count
        // 开启定时器
        resume()
      }
      // 把 值返回出去
      return { pause, resume, start, countTime }
    }
    // 调用函数的时候传入实参  然后接受传出来的参数  最后使用setup的return  return 出去 让他响应在页面上
    const { pause, resume, start, countTime } = run(50)
    return {
      countTime,
      start,
      pause,
      resume
    }
  }
</script>