@vueuse/core常用方法总结

@vueuse/core 是一个基于 Vue 3 Composition API 的实用函数库，它提供了大量的可组合函数（Composables），用于增强 Vue 应用的开发体验。

useMouse

说明：监听鼠标事件，如移动、点击等，并返回鼠标的位置和事件信息

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

useElementSize

说明：监听 DOM 元素的大小变化

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

useInterval

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

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

useTimeout

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

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

useLocalStorage / useSessionStorage

说明：方便地访问和操作 localStorage 或 sessionStorage。

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

useWindowScroll

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

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

useMediaQuery

根据媒体查询的结果来控制响应式逻辑

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

useFetch

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

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

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