vueuse中的useInterval

useInterval是Vueuse中提供的一个自定义hook，用于处理定时器的逻辑。它可以在组件中使用，帮助我们方便地设置和清除定时器。

使用useInterval需要传入两个参数：一个回调函数和一个时间间隔。在组件中使用时，它会自动开始计时并调用回调函数，直到组件卸载或者手动清除定时器。

下面是一个简单的例子，每秒钟打印当前时间：

import { useInterval } from '@vueuse/core'

export default {
  setup() {
    useInterval(() => {
      console.log(new Date())
    }, 1000)
  }
}

除了基本的回调函数和时间间隔参数外，useInterval还可以传入第三个参数，用于指定依赖项。如果依赖项发生变化，定时器会被重置。这可以帮助我们避免不必要的计时器开销。

import { ref } from 'vue'
import { useInterval } from '@vueuse/core'

export default {
  setup() {
    const count = ref(0)

    useInterval(() => {
      console.log(count.value)
      count.value++
    }, 1000, [count])

    return { count }
  }
}