@vueuse/core常用方法总结

@vueuse/core 是一个基于 Vue 3 Composition API 的实用函数库，它提供了大量的可组合函数（Composables），用于增强 Vue 应用的开发体验。
useMouse
说明：监听鼠标事件，如移动、点击等，并返回鼠标的位置和事件信息

1. import { useMouse } from '@vueuse/core';  
2. const { x, y, isOutside } = useMouse();

复制代码

useElementSize
说明：监听 DOM 元素的巨细变化

1. import { ref } from 'vue';  
2. import { useElementSize } from '@vueuse/core';  
3. const el = ref(null);  
4. const { size } = useElementSize(el);

复制代码

useInterval

说明：设置一个定时执行的隔断（interval）。

1. import { useInterval } from '@vueuse/core';  
2. const { start, stop, pause, resume } = useInterval(() => {  
3.   console.log('Interval executed');  
4. }, 1000);

复制代码

useTimeout
说明：设置一个延时执行的定时器（timeout）。

1. import { useTimeout } from '@vueuse/core';  
2. const { isActive, pause, resume, promise } = useTimeout(() => {  
3.   console.log('Timeout executed');  
4. }, 3000);

复制代码

useLocalStorage / useSessionStorage
说明：方便地访问和操纵 localStorage 或 sessionStorage。

1. import { useLocalStorage } from '@vueuse/core';  
2. const state = useLocalStorage('my-key', 'default-value');

复制代码

useWindowScroll
监听窗口滚动事件，并返回滚动位置。

1. import { useWindowScroll } from '@vueuse/core';  
2. const { x, y } = useWindowScroll();

复制代码

useMediaQuery
根据媒体查询的效果来控制相应式逻辑

1. import { useMediaQuery } from '@vueuse/core';  
2. const isDark = useMediaQuery('(prefers-color-scheme: dark)');

复制代码

useFetch
一个封装了 fetch API 的可组合函数，用于发送网络请求。

1. import { useFetch } from '@vueuse/core';  
2. const { data, error, loading } = useFetch('https://api.example.com/data');

复制代码

@vueuse/core 的官方文档开始利用 | VueUse 中文网 (nodejs.cn)

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。