@vueuse/core 的简介与最佳使用实践

最新推荐文章于 2025-03-11 14:39:52 发布

啥子花道

最新推荐文章于 2025-03-11 14:39:52 发布

阅读量7.6k

点赞数 40

文章标签： javascript 前端 vue.js vue

本文链接：https://blog.csdn.net/2301_80826038/article/details/142208970

版权

@vueuse/core 是一个基于 Vue.js 的实用工具库，提供了一系列的组合式 API（Composition API）和工具函数，帮助开发者更高效地构建 Vue 应用。这个库包含了很多常用的功能和模式，可以简化开发过程，提升代码的可读性和可维护性。

以下是 @vueuse/core 提供的一些主要功能：

状态管理（State Management）：
- useState：创建和管理局部状态。
- useStorage：在 localStorage 或 sessionStorage 中存储和同步状态。
传感器（Sensors）：
- useMouse：获取鼠标位置。
- useWindowSize：获取窗口尺寸。
- useGeolocation：获取地理位置信息。
副作用（Side Effects）：
- useTitle：动态设置文档标题。
- useFavicon：动态设置网页的 favicon。
网络（Network）：
- useFetch：进行 HTTP 请求。
- useWebSocket：使用 WebSocket 进行实时通信。
时间（Time）：
- useInterval：定时器。
- useTimeout：延时器。
动画和过渡（Animation and Transition）：
- useTransition：处理过渡效果。
- useSpring：实现弹簧动画。
表单（Forms）：
- useForm：处理表单状态和验证。
实用函数（Utilities）：
- useDebounce：防抖函数。
- useThrottle：节流函数。

这些功能可以帮助开发者更方便地处理常见的需求，减少重复代码，提高开发效率。使用 @vueuse/core，可以更容易地实现响应式、可复用的 Vue 组件和应用。

你可以通过以下方式安装 @vueuse/core：

npm install @vueuse/core

在你的 Vue 组件中使用：

import { useMouse } from '@vueuse/core'

export default {
  setup() {
    const { x, y } = useMouse()
    return { x, y }
  }
}

这个例子展示了如何使用 useMouse 获取鼠标的位置，并在组件中进行响应式绑定。

以下是一个使用 @vueuse/core 包的最佳实践示例。我们将构建一个简单的 Vue 3 应用，该应用展示了如何使用 @vueuse/core 的多个功能来实现一个响应式的用户界面。

项目设置

首先，我们需要创建一个新的 Vue 3 项目并安装 @vueuse/core：

npm init vue@latest
cd your-project
npm install
npm install @vueuse/core

示例应用

我们将创建一个简单的应用，该应用包含以下功能：

显示当前窗口尺寸。
显示鼠标位置。
动态更新页面标题。
使用 localStorage 存储用户输入的数据。

1. 创建主组件 `App.vue`

<template>
  <div>
    <h1>VueUse Core Example</h1>
    <div>
      <h2>Window Size</h2>
      <p>Width: {{ width }}</p>
      <p>Height: {{ height }}</p>
    </div>
    <div>
      <h2>Mouse Position</h2>
      <p>X: {{ x }}</p>
      <p>Y: {{ y }}</p>
    </div>
    <div>
      <h2>Page Title</h2>
      <input v-model="title" placeholder="Enter page title" />
    </div>
    <div>
      <h2>Local Storage</h2>
      <input v-model="storedValue" placeholder="Enter something to store" />
      <p>Stored Value: {{ storedValue }}</p>
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import { useWindowSize, useMouse, useTitle, useStorage } from '@vueuse/core'

export default {
  setup() {
    // 获取窗口尺寸
    const { width, height } = useWindowSize()

    // 获取鼠标位置
    const { x, y } = useMouse()

    // 动态设置页面标题
    const title = ref('VueUse Example')
    useTitle(title)

    // 使用 localStorage 存储数据
    const storedValue = useStorage('my-storage-key', '')

    return {
      width,
      height,
      x,
      y,
      title,
      storedValue,
    }
  },
}
</script>

<style>
body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
div {
  padding: 20px;
}
</style>

2. 解释代码

窗口尺寸：
```
const { width, height } = useWindowSize()
```
使用 useWindowSize 获取窗口的宽度和高度，并在模板中展示。
鼠标位置：
```
const { x, y } = useMouse()
```
使用 useMouse 获取鼠标的 X 和 Y 位置，并在模板中展示。
页面标题：
```
const title = ref('VueUse Example')
useTitle(title)
```
使用 useTitle 动态设置页面标题，并通过输入框进行更新。
localStorage：
```
const storedValue = useStorage('my-storage-key', '')
```
使用 useStorage 将输入框的值存储到 localStorage 中，并在页面刷新时保持数据。