Vue 3 超强技巧:VueUse,让代码更优雅、开发更高效!

5,971 阅读2分钟

在前端开发中,如何提升代码的可读性与复用性一直是开发者关注的焦点。这几天,发现了一个适用于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/