vue3【提效】使用 VueUse 高效开发（工具库 @vueuse/core + 新增的组件库 @vueuse/components）

VueUse 是一个面向 Vue 3 的实用函数集合库，它提供了很多常用的函数式编程工具，可以帮助开发者更高效地进行开发。

以下是一些使用 VueUse 提高开发效率的示例：

1. 使用 useRefs 代替 ref 和 toRefs：

<template>
  <div>
    <input v-model="state.text" />
    <button @click="handleSubmit">Submit</button>
  </div>
</template>
 
<script setup>
import { useRefs } from '@vueuse/core'
 
const { state, handleSubmit } = useRefs({
  text: '',
}, {
  // 自定义响应函数
  handleSubmit() {
    alert(state.text)
    state.text = ''
  }
})
</script>

2. 使用 useFetch 处理 HTTP 请求：

<template>
  <div>
    <button @click="fetcher.run(1)">Fetch Data</button>
    <div v-if="fetcher.isFetching">Loading...</div>
    <div v-else>{{ fetcher.data }}</div>
  </div>
</template>
 
<script setup>
import { useFetch } from '@vueuse/core'
 
const fetcher = useFetch(async (id) => {
  const response = await fetch(`https://api.example.com/data/${id}`)
  return await response.json()
})
</script>

3. 使用 useMouse 跟踪鼠标位置：

<template>
  <div>
    Mouse Position: x= {{ mouse.x }} y= {{ mouse.y }}
  </div>
</template>
 
<script setup>
import { useMouse } from '@vueuse/core'
 
const mouse = useMouse()
</script>

VueUse 提供了大量实用的函数，可以帮助开发者减少重复工作，提高代码质量和开发效率。在开发中，可以根据项目需求选择合适的工具函数进行使用。