VueUse：Vue 组合式 API 实用工具

VueUse 是一个基于 Vue 组合式 API 的实用工具集，旨在为 Vue 3 提供更多的可组合函数。它为开发者提供了一系列常用的功能和工具，使得 Vue 应用的开发更加高效和便捷。

一、安装 VueUse

要使用 VueUse，首先需要安装它。可以使用 npm 或 yarn 进行安装：

npm install @vueuse/core

或者

yarn add @vueuse/core

 

二、基本用法

安装完成后，可以在 Vue 组件中导入并使用 VueUse 提供的工具函数。

 

<template>
  <div>
    <p>当前时间: {{ now }}</p>
  </div>
</template>

<script setup>
import { useNow } from '@vueuse/core';

const now = useNow();
</script>
 

 

在上面的例子中，我们使用了 useNow 函数来获取当前时间，并在模板中展示。

三、常用功能介绍

VueUse 提供了大量的实用功能，以下是一些常用的示例：

1. useMouse：获取鼠标位置

 

<template>
  <div>
    <p>鼠标位置: {{ x }}, {{ y }}</p>
  </div>
</template>

<script setup>
import { useMouse } from '@vueuse/core';

const { x, y } = useMouse();
</script>
 

 

1. useLocalStorage：使用 LocalStorage

<template>
  <div>
    <input v-model="name" placeholder="输入你的名字" />
    <p>保存的名字: {{ name }}</p>
  </div>
</template>

<script setup>
import { useLocalStorage } from '@vueuse/core';

const name = useLocalStorage('name', '');
</script>

 useFetch：进行 HTTP 请求

<template>
  <div>
    <p>数据: {{ data }}</p>
    <p>错误: {{ error }}</p>
  </div>
</template>

<script setup>
import { useFetch } from '@vueuse/core';

const { data, error } = await useFetch('https://api.example.com/data').json();
</script>
 

 

四、自定义组合函数

除了使用 VueUse 提供的现成工具外，你还可以自定义组合函数，以提高代码的复用性。

五、总结

VueUse 是一个功能强大的工具库，为 Vue 3 的开发提供了大量实用的组合函数。通过 VueUse，开发者可以更高效地构建 Vue 应用，并提高代码的复用性和可维护性。

希望通过本文的介绍，您能更好地理解和使用 VueUse。如果有任何问题或建议，欢迎在评论区留言讨论。

---

引用：

1. VueUse 官方文档
2. Vue 组合式 API 文档