在前端开发中,如何提升代码的可读性与复用性一直是开发者关注的焦点。这几天,发现了一个适用于vue的超强工具库VueUse!它以其丰富的功能和极高的易用性,成为 Vue 3 开发者的首选工具库。
单看它的周下载量,我们就知道它有多火了!
本文将带你全面了解 VueUse 的强大之处,帮助你让代码更优雅、开发更高效!
什么是 VueUse?
VueUse 是一个基于** Vue Composition API** 的实用工具函数集合,旨在简化 Vue 应用的开发。它不仅提供了对 Vue 响应式系统的高度抽象,还封装了各种浏览器 API、状态管理工具、时间处理函数等常用功能。
- 模块化与按需加载:支持按需引入,优化性能。
- 高可扩展性:支持插件扩展,如 Router、Firebase 等。
- 社区活跃:文档详尽,功能更新迅速,适配最新 Vue 版本。
VueUse 的使用场景与示例
如何使用
在脚手架项目中,我们使用前需要安装vueuse/core
npm i @vueuse/core
安装好vueuse/core依赖后,我们就可以从@vueuse/core中引入相应的方法了
<script setup>
import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'
// .....
</script>
下面,我将展示一些VueUse v12.0 中常用的 API ,帮助大家快速了解、掌握vueuse的实际应用场景。
常用API使用场景
状态管理
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 = '你好'; // 更新值
浏览器 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 元素更加简单高效。
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); // 让该元素可拖拽
时间管理
时间相关的 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()}`);
});
动画与交互
VueUse 提供了与动画和交互相关的工具。
useIntersectionObserver
检测元素是否在视口中,我们可以借此实现懒加载、滚动触发动画等效果
import { ref } from 'vue';
import { useIntersectionObserver } from '@vueuse/core';
const elementRef = ref(null);
const { isIntersecting } = useIntersectionObserver(elementRef, ([entry]) => {
console.log('元素是否可见:', entry.isIntersecting);
});
网络请求
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 是一个强大的vue3开发工具库,上文只展示了一点点,大家可以参考官方文档学习更多实用的API!这些API几乎可以满足 Vue 项目中的所有日常开发需求。
官方地址:vueuse.pages.dev/