23个不可错过的Vue3实用Hook
作者：乐闻x
@vueuse/core提供了丰富的功能性钩子,使得处理常见的开发任务变得更加简洁和高效,本文将详细介绍如何在Vue3项目中使用 @vueuse/core及其一些极具价值的功能,需要的可以参考下
前言
为了进一步提升开发效率和代码质量，@vueuse/core 作为一款基于 Vue 3 Composition API 的实用工具库，提供了丰富的功能性钩子，使得处理常见的开发任务变得更加简洁和高效。
本文将详细介绍如何在 Vue 3 项目中使用 @vueuse/core 及其一些极具价值的功能，以帮助开发者更好地应对复杂的开发需求。
什么是 @vueuse/core
@vueuse/core 是一个面向 Vue 3 的工具库，提供了一组基于 Composition API 的实用函数。它可以帮助我们更轻松地处理常见的开发任务，比如状态管理、浏览器 API 集成、时间处理等等。
为什么要用 @vueuse/core
提高开发效率：提供丰富的实用函数，减少代码量。
提升代码可读性：函数封装良好，使代码更易读。
活跃的社区支持：持续更新和完善，社区活跃。
@vueuse/core 常用功能
1. useMouse
useMouse 可以让你轻松获取鼠标指针的位置。想象一下，你需要在页面上显示鼠标的位置，大致是这样的代码：
import { useMouse } from '@vueuse/core';
export default {
setup() {
const { x, y } = useMouse();
return { x, y };
},
};
//在模板中使用：
<template>
<div>
鼠标位置: ({{ x }}, {{ y }})
</div>
</template>
2. useFetch
useFetch 是一个很方便的工具，用来处理 HTTP 请求。假设你需要从 API 获取数据：
import { useFetch } from '@vueuse/core';
export default {
setup() {
const { data, error, isFetching } = useFetch('https://api.example.com/data').json();
return { data, error, isFetching };
},
};
//在模板中展示数据：
<template>
<div>
<div v-if="isFetching">加载中...</div>
<div v-else-if="error">出错了: {{ error.message }}</div>
<div v-else>{{ data }}</div>
</div>
</template>3. useLocalStorage
useLocalStorage 让你轻松读写浏览器的 localStorage。比如，你想保存用户的偏好设置：
import { useLocalStorage } from '@vueuse/core';
export default {
setup() {
const theme = useLocalStorage('theme', 'light');
return { theme };
},
};
//在模板中绑定到用户界面：
<template>
<div>
<select v-model="theme">
<option value="light">浅色</option>
<option value="dark">深色</option>
</select>
</div>
</template>4. useDark
useDark 让你轻松实现深色模式的切换：
import { useDark, useToggle } from '@vueuse/core';
export default {
setup() {
const isDark = useDark();
const toggleDark = useToggle(isDark);
return { isDark, toggleDark };
},
};
//在模板中添加切换按钮：
<template>
<div>
<button @click="toggleDark">
切换到 {{ isDark ? '浅色' : '深色' }} 模式
</button>
</div>
</template>5. useDebounce
useDebounce 是一个非常实用的函数，用于处理高频率调用的场景，比如搜索框输入时的自动补全。它可以有效防止函数在短时间内被多次调用。
import { ref } from 'vue';
import { useDebounce } from '@vueuse/core';
export default {
setup() {
const searchQuery = ref('');
const debouncedQuery = useDebounce(searchQuery, 300); // 300ms 的防抖
watch(debouncedQuery, (newValue) => {
// 这里可以进行 API 请求或其他操作
console.log('API 调用查询: ', newValue);
});
return { searchQuery };
},
};
//在模板中使用：
<template>
<div>
<input v-model="searchQuery" placeholder="输入查询内容..." />
</div>
</template>
6. useDeviceOrientation
useDeviceOrientation 让你可以轻松获取设备的方向信息。这个功能在移动端开发中尤为重要，比如做游戏或界面旋转适配。
import { useDeviceOrientation } from '@vueuse/core';
export default {
setup() {
const { alpha, beta, gamma } = useDeviceOrientation();
return { alpha, beta, gamma };
},
};
//在模板中显示设备方向：
<template>
<div>
<div>Alpha: {{ alpha }}</div>
<div>Beta: {{ beta }}</div>
<div>Gamma: {{ gamma }}</div>
</div>
</template>
7. useNetwork
useNetwork 让你可以检测用户的网络状态，比如在线或离线，甚至可以监控网络的类型（如 wifi、4g 等）。
import { useNetwork } from '@vueuse/core';
export default {
setup() {
const { isOnline, saveData, connectionType } = useNetwork();
return { isOnline, saveData, connectionType };
},
};
//在模板中显示网络状态：
<template>
<div>
<div>网络状态: {{ isOnline ? '在线' : '离线' }}</div>
<div>连接类型: {{ connectionType }}</div>
<div>是否节省数据: {{ saveData }}</div>
</div>
</template>
8. useBattery
useBattery 可以让你获取设备的电池状态信息，这在移动应用中非常有用。
import { useBattery } from '@vueuse/core';
export default {
setup() {
const { isCharging, chargingTime, dischargingTime, level } = useBattery();
return { isCharging, chargingTime, dischargingTime, level };
},
};
//在模板中显示电池状态：
<template>
<div>
<div>正在充电: {{ isCharging ? '是' : '否' }}</div>
<div>电池电量: {{ level * 100 }}%</div>
<div>充电时间: {{ chargingTime }} 秒</div>
<div>放电时间: {{ dischargingTime }} 秒</div>
</div>
</template>
9. useWindowSize
useWindowSize 可以让你实时获取窗口的宽度和高度，非常适合响应式设计。
import { useWindowSize } from '@vueuse/core';
export default {
setup() {
const { width, height } = useWindowSize();
return { width, height };
},
};
//在模板中显示窗口尺寸：
<template>
<div>
<div>窗口宽度: {{ width }} px</div>
<div>窗口高度: {{ height }} px</div>
</div>
</template>
10. usePreferredDark
usePreferredDark 可以帮助你自动检测用户的系统深色模式偏好，并在你的应用中做出相应的调整。这对于创建符合用户习惯的界面非常有帮助。
import { usePreferredDark } from '@vueuse/core';
export default {
setup() {
const isDarkPreferred = usePreferredDark();
return { isDarkPreferred };
},
};
//在模板中使用：
<template>
<div>
<div>系统深色模式偏好: {{ isDarkPreferred ? '深色' : '浅色' }}</div>
</div>
</template>
11. useClipboard
useClipboard 提供了便捷的剪贴板操作功能，可以轻松实现文本的复制和粘贴。例如，你需要实现一个“复制到剪贴板”的功能：
import { useClipboard } from '@vueuse/core';
export default {
setup() {
const { copy, copied } = useClipboard();
const copyText = async () => {
await copy('要复制的文本');
};
return { copyText, copied };
},
};
//在模板中添加按钮：
<template>
<div>
<button @click="copyText">复制文本</button>
<div v-if="copied">已复制!</div>
</div>
</template>
12. useGeolocation
useGeolocation 让你可以轻松获取用户的位置，这是很多地理位置相关应用的核心功能。
import { useGeolocation } from '@vueuse/core';
export default {
setup() {
const { coords, locatedAt, error } = useGeolocation();
return { coords, locatedAt, error };
},
};
//在模板中显示地理位置：
<template>
<div>
<div v-if="error">定位失败: {{ error.message }}</div>
<div v-else>
<div>纬度: {{ coords.latitude }}</div>
<div>经度: {{ coords.longitude }}</div>
<div>定位时间: {{ locatedAt }}</div>
</div>
</div>
</template>
13. useTitle
useTitle 允许你动态地设置和获取页面的标题。这在单页面应用中尤其有用，可以让每个路由有自己独特的标题。
import { useTitle } from '@vueuse/core';
export default {
setup() {
const title = useTitle();
title.value = '我的 Vue 应用';
return { title };
},
};
//在模板中：
<template>
<div>
<input v-model="title" placeholder="修改页面标题" />
</div>
</template>
14. useIdle
useIdle 可以检测用户是否处于闲置状态。这个功能可以用来实现用户不活动时自动登出等功能。
import { useIdle } from '@vueuse/core';
export default {
setup() {
const isIdle = useIdle(5000); // 设置闲置时间为 5 秒
return { isIdle };
},
};
//在模板中显示用户状态：
<template>
<div>
<div>用户状态: {{ isIdle ? '闲置' : '活跃' }}</div>
</div>
</template>
15. useEventListener
useEventListener 可以让你更方便地添加和管理事件监听器，特别适合需要在组件卸载时自动移除事件监听的场景。
import { ref } from 'vue';
import { useEventListener } from '@vueuse/core';
export default {
setup() {
const count = ref(0);
useEventListener(window, 'click', () => {
count.value += 1;
});
return { count };
},
};
//在模板中显示点击次数：
<template>
<div>
<div>点击次数: {{ count }}</div>
</div>
</template>
16. useMediaQuery
useMediaQuery 可以让你根据媒体查询条件检测设备的状态，这对于响应式设计和不同设备适配非常有用。
import { useMediaQuery } from '@vueuse/core';
export default {
setup() {
const isLargeScreen = useMediaQuery('(min-width: 1024px)');
return { isLargeScreen };
},
};
//在模板中显示不同设备状态：
<template>
<div>
<div>设备状态: {{ isLargeScreen ? '大屏幕' : '小屏幕' }}</div>
</div>
</template>
17. useIntersectionObserver
useIntersectionObserver 让你可以检测某个元素是否可见，并且可以执行相应的操作，比如实现图片懒加载等。
import { ref } from 'vue';
import { useIntersectionObserver } from '@vueuse/core';
export default {
setup() {
const target = ref(null);
const { isIntersecting } = useIntersectionObserver(target, {
threshold: 0.1,
});
return { target, isIntersecting };
},
};
//在模板中实现懒加载图片：
<template>
<div ref="target">
<img v-if="isIntersecting" src="path/to/your/image.jpg" alt="Lazy Loaded Image" />
<div v-else>加载中...</div>
</div>
</template>
18. useParallax
useParallax 让你轻松实现视差滚动效果，这在现代网页设计中非常流行。
import { ref } from 'vue';
import { useParallax } from '@vueuse/core';
export default {
setup() {
const target = ref(null);
const { x, y } = useParallax(target, {
factor: 0.5,
});
return { target, x, y };
},
};
//在模板中实现视差效果：
<template>
<div ref="target" :style="{ transform: `translate3d(${x}px, ${y}px, 0)` }">
视差效果元素
</div>
</template>
19. useResizeObserver
useResizeObserver 用于监听元素的尺寸变化，这对于响应式布局和动态元素非常有用。
import { ref } from 'vue';
import { useResizeObserver } from '@vueuse/core';
export default {
setup() {
const target = ref(null);
const size = ref({ width: 0, height: 0 });
useResizeObserver(target, (entries) => {
for (let entry of entries) {
size.value.width = entry.contentRect.width;
size.value.height = entry.contentRect.height;
}
});
return { target, size };
},
};
//在模板中显示元素尺寸：
<template>
<div ref="target">
<div>宽度: {{ size.width }} px</div>
<div>高度: {{ size.height }} px</div>
</div>
</template>
20. useSessionStorage
useSessionStorage 让你轻松操作 sessionStorage，和 useLocalStorage 类似，但数据仅在会话期间存在。
import { useSessionStorage } from '@vueuse/core';
export default {
setup() {
const user = useSessionStorage('user', { name: 'John Doe' });
return { user };
},
};
//在模板中使用：
<template>
<div>
<input v-model="user.name" placeholder="用户名" />
<div>当前用户: {{ user.name }}</div>
</div>
</template>
21. useElementBounding
useElementBounding 可以获取一个元素的边界信息（比如位置和尺寸），这对于复杂布局和动画效果很有帮助。
import { ref } from 'vue';
import { useElementBounding } from '@vueuse/core';
export default {
setup() {
const target = ref(null);
const { top, left, width, height } = useElementBounding(target);
return { target, top, left, width, height };
},
};
//在模板中显示元素边界信息：
<template>
<div ref="target">
<div>顶部: {{ top }} px</div>
<div>左部: {{ left }} px</div>
<div>宽度: {{ width }} px</div>
<div>高度: {{ height }} px</div>
</div>
</template>
22. useOnline
useOnline 允许你检测用户是否在线，这在处理离线状态和数据同步时非常有用。
import { useOnline } from '@vueuse/core';
export default {
setup() {
const isOnline = useOnline();
return { isOnline };
},
};
//在模板中显示在线状态：
<template>
<div>
<div>网络状态: {{ isOnline ? '在线' : '离线' }}</div>
</div>
</template>
23. usePreferredLanguages
usePreferredLanguages 可以获取用户的首选语言列表，这在多语言支持的应用中非常有用。
import { usePreferredLanguages } from '@vueuse/core';
export default {
setup() {
const preferredLanguages = usePreferredLanguages();
return { preferredLanguages };
},
};
//在模板中显示首选语言：
<template>
<div>
<div>首选语言: {{ preferredLanguages.join(', ') }}</div>
</div>
</template>
总结
通过本文对 @vueuse/core 的详细介绍，我们可以看到这个工具库为 Vue 3 项目带来了众多便捷和强大的功能，大大简化了开发过程。无论是状态管理、设备信息获取还是浏览器 API 集成，@vueuse/core 都提供了完善的解决方案，帮助开发者实现高效、优雅的代码。在实际项目中，充分利用这些工具不仅能提升开发效率，还能优化用户体验。
到此这篇关于23个不可错过的Vue3实用Hook的文章就介绍到这了,更多相关Vue3实用Hook内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！