VueUse: библиотека композируемых модулей
useLocalStorage, useMouse, useWindowSize, useIntersectionObserver — практическое применение VueUse
«VueUse: библиотека композируемых модулей» — бесплатный урок Vue Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Что такое VueUse
VueUse (@vueuse/core) — это большая коллекция готовых композаблов для распространённых задач: хранилища, датчики, браузерные API и многое другое. Она избавляет Вас от необходимости изобретать их заново.
npm install @vueuse/coreuseLocalStorage для сохранения данных
useLocalStorage возвращает реф, синхронизированный с localStorage. Изменения автоматически сохраняются между перезагрузками, а сериализация выполняется за Вас.
import { useLocalStorage } from "@vueuse/core";
const name = useLocalStorage("name", "Guest");
// name.value persists in localStorageРеактивность и сохранение данных
Возвращаемый реф ведёт себя как любой другой — привяжите его с помощью v-model, — но его значение сохраняется после обновления страницы, поскольку VueUse записывает его в хранилище.
<input v-model="name" />useMouse для отслеживания положения курсора
useMouse отслеживает указатель и возвращает реактивные рефы x и y, обновляющиеся при движении курсора.
import { useMouse } from "@vueuse/core";
const { x, y } = useMouse();Отображение координат мыши
Привяжите рефы в шаблоне: они будут обновляться при каждом движении мыши без необходимости самостоятельно подключать обработчики.
<p>Cursor: {{ x }}, {{ y }}</p>useWindowSize для получения размеров
useWindowSize предоставляет реактивные рефы width и height, обновляющиеся при изменении размера окна. Это удобно для адаптивной логики в скрипте.
import { useWindowSize } from "@vueuse/core";
const { width, height } = useWindowSize();Адаптивная логика
Объедините размер окна с вычисляемым значением, чтобы реактивно управлять решениями по компоновке.
import { computed } from "vue";
const isMobile = computed(() => width.value < 768);useIntersectionObserver для отложенной загрузки
useIntersectionObserver сообщает, когда элемент входит в область просмотра, — это основа отложенной загрузки изображений и бесконечной прокрутки.
import { useIntersectionObserver } from "@vueuse/core";
const target = ref(null);Запуск при появлении
Передайте шаблонный реф и обратный вызов, который срабатывает с записями о пересечении. Загружайте изображение или получайте дополнительные данные, когда целевой элемент становится видимым.
useIntersectionObserver(target, ([entry]) => {
if (entry.isIntersecting) loadImage();
});Автоматическая очистка
Большое преимущество заключается в том, что композаблы VueUse регистрируют и удаляют собственные обработчики и наблюдатели при размонтировании. Вы получаете правильную очистку автоматически.
Зачем использовать VueUse
VueUse поддерживает удаление неиспользуемого кода при сборке, хорошо протестирован и изначально ориентирован на TypeScript. Для распространённых задач — хранилища, датчики, сеть и время — сначала обращайтесь к VueUse, а уже потом пишите собственный композабл.
Быстрая проверка
Какой композабл VueUse сохраняет реф в localStorage?
Итоги
Вы познакомились с VueUse: useLocalStorage (сохраняемое состояние), useMouse (положение курсора), useWindowSize (реактивные размеры) и useIntersectionObserver (запуск отложенной загрузки), — все они автоматически выполняют очистку и поддерживают удаление неиспользуемого кода при сборке.
Часто задаваемые вопросы
Урок «VueUse: библиотека композируемых модулей» бесплатный?
Да — полный текст урока «VueUse: библиотека композируемых модулей» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «VueUse: библиотека композируемых модулей»?
useLocalStorage, useMouse, useWindowSize, useIntersectionObserver — практическое применение VueUse Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «VueUse: библиотека композируемых модулей»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Что делает компонуемую функцию хорошей
- useCounter: простой композируемый модуль
- useFetch: композируемый модуль для асинхронных данных
- VueUse: библиотека композируемых модулей