VueUse
↑ 4.1 Vue 3: основы, компоненты, Composition API · ← Предыдущая · → Следующая
Зачем это на собесе
Знание готовых composables экономит время:
useStorage,useDebounceFn,useEventListener.
Объяснение
VueUse — коллекция сотен composables на Composition API (@vueuse/core, @vueuse/integrations, @vueuse/router и др.).
| Категория | Примеры |
|---|---|
| Состояние | useStorage, useLocalStorage, useToggle, useCounter, useRefHistory |
| Элементы | useElementSize, useIntersectionObserver, useResizeObserver, onClickOutside, useFocus |
| Браузер | useTitle, useClipboard, useDark, usePreferredDark, useMediaQuery, useBreakpoints, useFullscreen, useShare |
| Сенсоры и события | useEventListener, useMouse, useKeyModifier, onKeyStroke, useSwipe |
| Сеть | useFetch, useWebSocket, useOnline, useEventSource |
| Утилиты | useDebounceFn, useThrottleFn, useTimeout, useInterval, useNow, useTimeAgo, refDebounced, watchDebounced, useVModel |
| Анимация | useTransition, useRafFn |
| Интеграции | useAxios, useQRCode, useSortable, useFuse |
import { useLocalStorage, useDebounceFn, useEventListener, onClickOutside, useDark, useIntersectionObserver } from "@vueuse/core";
const prefs = useLocalStorage("prefs", { theme: "light", perPage: 20 }); // реактивно и синхронно с хранилищем
const search = useDebounceFn((q: string) => load(q), 300);
const dark = useDark();
const target = ref<HTMLElement | null>(null);
onClickOutside(target, () => (open.value = false));
useEventListener(window, "resize", onResize); // автоматическая очистка
const { stop } = useIntersectionObserver(sentinel, ([{ isIntersecting }]) => isIntersecting && loadMore());Преимущества: очистка ресурсов автоматически (привязка к области), SSR-безопасность, tree-shaking, типы.
Когда не подходит: если нужен один маленький хелпер — проще написать самому; следите за размером зависимостей.
Нюансы и подводные камни
- Не зависите слепо от сложных composables (например,
useFetch) — для API лучше TanStack Query. - Проверяйте поддержку API в целевых браузерах.
- Версии
@vueuse/*пакетов должны совпадать. - Прежде чем писать свой composable, посмотрите VueUse.
Практика
- Замените ручные слушатели событий и таймеры на VueUse.
- Реализуйте тёмную тему через
useDark. - Сделайте бесконечную прокрутку через
useIntersectionObserver.
Вопросы с ответами
Что такое VueUse?
Набор готовых composables для браузерных API, состояния и утилит.
Чем полезна привязка к области видимости?
Слушатели и таймеры очищаются автоматически при уничтожении компонента.