文章目录
前言
VueUse 是一个基于 Vue 3 Composition API 的工具函数集合，它提供了大量实用的功能，能够极大地提升 Vue 3 的开发效率。无论你是 Vue 新手还是经验丰富的开发者，VueUse 都能为你带来惊喜。
官方地址：https://vueuse.pages.dev/guide/
一、 VueUse 的优势
-
开箱即用： VueUse 提供了超过 200 个函数，涵盖了状态管理、DOM 操作、动画、网络请求等各种场景，无需重复造轮子。
-
Composition API： 基于 Composition API 设计，可以更好地组织代码逻辑，提升代码的可读性和可维护性。
-
TypeScript 支持： 提供了完善的 TypeScript 类型定义，代码提示更加友好。
-
轻量级： 按需引入，不会对项目体积造成负担。
-
活跃的社区： 拥有活跃的社区和详细的文档，学习和使用都非常方便。
二、 VueUse 的使用
- 安装：
npm install @vueuse/core
- 引入：
import {
useMouse, useLocalStorage } from '@vueuse/core'
- 使用：
export default {
setup() {
// 获取鼠标位置
const {
x, y } = useMouse()
// 使用 localStorage
const storage = useLocalStorage('my-storage', {
name: 'VueUse',
})
return {
x,
y,
storage,
}
},
}
三、 VueUse 常用函数推荐
-
状态管理： useStorage, useLocalStorage, useSessionStorage
-
DOM 操作： useMouse, useEventListener, useResizeObserver
-
动画： useTransition, useSpring
-
网络请求： useFetch, useAxios
-
工具函数： useDebounceFn, useThrottleFn, useInterval
3.1 状态管理
VueUse 提供了多种状态管理工具，可以轻松实现数据的响应式绑定与持久化。
useLocalStorage
将数据绑定到localStorage，实现持久化和响应式。
import {
useLocalStorage } from '@vueuse/core';
// 使用 localStorage 存储用户主题偏好，默认为 "light"
const theme = useLocalStorage('theme', 'light');
// 更新值时，localStorage 会自动更新
theme.value = 'dark'; // localStorage["theme"] = "dark"
// 监听主题变化，响应式更新
watch(theme, (newValue) => {
console.log(`主题切换为：${
newValue}`);
});
useSessionStorage
与 useLocalStorage 类似，但数据保存在会话中，关闭浏览器后失效。
import {
useSessionStorage } from '@vueuse/core';
// 会话级存储，页面关闭后失效
const sessionData = useSessionStorage('session', {
user: '快乐就是哈哈哈' });
sessionData.value.user = '你好'; // 更新值
3.2 浏览器 API
VueUse 提供了多种封装良好的浏览器 API，便于操作。
useWindowSize
动态监听浏览器窗口大小。
import {
useWindowSize } from '@vueuse/core';
const {
width, height } = useWindowSize();
watchEffect(() => {
console.log(`窗口大小：${
width.value} x ${
height.value}`);
});
useClipboard
用于读取和操作剪贴板内容。
import {
useClipboard } from '@vueuse/core';
const {
text, copy, isSupported } = useClipboard();
// 检查是否支持剪贴板功能
if (isSupported) {
copy('VueUse 是强大的工具集！'); // 复制文本
console.log('已复制到剪贴板');
}
通过 VueUse 操作 DOM 元素更加简单高效。
3.3 DOM 操作
useElementSize
监听 HTML 元素大小。
import {
ref } from 'vue';
import {
useElementSize } from '@vueuse/core';
const elementRef = ref(null);
const {
width, height } = useElementSize(elementRef);
watchEffect(() => {
console.log(`元素宽度：${
width.value}px，高度：${
height.value}px`);
});
useDraggable
让元素支持拖拽功能。
import {
ref } from 'vue';
import {
useDraggable } from '@vueuse/core';
const elementRef = ref(null);
useDraggable(elementRef); // 让该元素可拖拽
3.4 时间管理
时间相关的 API 提供了实时功能支持。
useTimestamp
实时获取时间戳。
import {
useTimestamp } from '@vueuse/core';
const timestamp = useTimestamp();
watchEffect(() => {
console.log(`当前时间戳：${
timestamp.value}`);
});
useNow
获取当前时间。
import {
useNow } from '@vueuse/core';
const now = useNow();
watchEffect(() => {
console.log(`当前时间：${
now.value.toLocaleString()}`);
});
3.5 动画与交互
VueUse 提供了与动画和交互相关的工具。
useIntersectionObserver
检测元素是否在视口中，我们可以借此实现懒加载、滚动触发动画等效果
import {
ref } from 'vue';
import {
useIntersectionObserver } from '@vueuse/core';
const elementRef = ref(null);
const {
isIntersecting } = useIntersectionObserver(elementRef, ([entry]) => {
console.log('元素是否可见：', entry.isIntersecting);
});
3.6 网络请求
useFetch
封装了网络请求的响应式处理。
import {
useFetch } from '@vueuse/core';
const {
data, error, isFetching } = useFetch('https://这是一个链接').json();
watchEffect(() => {
if (isFetching.value) {
console.log('请求中...');
} else if (error.value) {
console.error('请求失败：', error.value);
} else {
console.log('请求成功：', data.value);
}
});
四、 总结
VueUse 是一个非常实用的工具库，它能够帮助我们更高效地开发 Vue 3 应用。如果你还没有尝试过 VueUse，强烈建议你将它加入到你的开发工具箱中，相信它会给你带来惊喜！