IT评测·应用市场-qidao123.com技术社区

标题: @vueuse/core常用方法总结 [打印本页]

作者: 雁过留声 时间: 2024-8-24 23:10
标题: @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)

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

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)