Vue 如何使用vueuse/core

VueUse 是一个 Vue.js 的插件库，它提供了多个常用的 Vue 自定义 Hook，可以帮助开发者更快速地构建 Vue 应用。VueUse 核心库提供了一些常用的 Hooks，如 useToggle、useLocalStorage、useEvent 等等。

要使用 VueUse，你需要首先在项目中安装 vue-use/core：

npm install @vueuse/core

然后在你的 Vue 组件中引入需要使用的 Hook：

<template>
  <div>
    <p>Current time: {{currentTime}}</p>
    <button @click="toggle">Toggle</button>
  </div>
</template>

<script>
import { useToggle, useInterval } from '@vueuse/core'

export default {
  setup() {
    const { state: isToggled, toggle } = useToggle(false)
    const currentTime = useInterval(1000, () => new Date().toLocaleTimeString())

    return {
      isToggled,
      toggle,
      currentTime,
    }
  },
}
</script>

在上面的例子中，我们使用了 useToggle 和 useInterval 这两个 Hook。useToggle 用于创建一个 boolean 类型的状态值和一个 toggle 方法，可以用于切换这个状态值；useInterval 则用于每隔一定时间执行一个回调函数，并返回回调函数的返回值。在 setup 函数中，我们通过解构赋值获得了这两个 Hook 返回的状态和方法，并将它们绑定到模板中用于显示和操作。