Vue 3 超强技巧：VueUse，让代码更优雅、开发更高效！在前端开发中，如何提升代码的可读性与复用性一直是开发者关注

在前端开发中，如何提升代码的可读性与复用性一直是开发者关注的焦点。这几天，发现了一个适用于vue的超强工具库VueUse！它以其丰富的功能和极高的易用性，成为 Vue 3 开发者的首选工具库。

单看它的周下载量，我们就知道它有多火了！

本文将带你全面了解 VueUse 的强大之处，帮助你让代码更优雅、开发更高效！

什么是 VueUse？

VueUse 是一个基于** Vue Composition API** 的实用工具函数集合，旨在简化 Vue 应用的开发。它不仅提供了对 Vue 响应式系统的高度抽象，还封装了各种浏览器 API、状态管理工具、时间处理函数等常用功能。

模块化与按需加载：支持按需引入，优化性能。
高可扩展性：支持插件扩展，如 Router、Firebase 等。
社区活跃：文档详尽，功能更新迅速，适配最新 Vue 版本。

官方地址：vueuse.pages.dev/guide/

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/