VueUse：Vue 3 开发中的强大 Hooks 库

VueUse 是一个针对 Vue 3 开发的 Hooks 库，它提供了一系列基于组合式 API 的函数，帮助开发者更简洁高效地编写 Vue 应用程序。

以下是如何使用 VueUse 中的 useInterval Hook 的示例代码：

<template>
  <div>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="stop">停止</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import { useInterval } from '@vueuse/core';
 
const count = ref(0);
 
function increment() {
  count.value++;
}
 
// 开始或重新开始间隔
const { isActive, start, stop } = useInterval(increment, 1000);
 
// 当组件卸载时停止间隔
start();
</script>

在这个例子中，我们使用 useInterval Hook 来创建一个每秒触发一次的定时器，该定时器在点击按钮时开始或重新开始。当组件卸载时，stop 函数会被调用来停止定时器。这个例子展示了如何使用 VueUse 提供的 Hooks 来简化和组织代码逻辑。