Главная боль ручных event listener — забыть отписаться при unmount. Это приводит к утечкам памяти. ```javascript // ❌ Ручной подход — легко забыть cleanup import { onMounted, onUnmounted } from 'vue' onMounted(() => { window.addEventListener('resize', handleResize) document.addEventListener('keydown', handleKeydown) }) onUnmounted(() => { window.removeEventListener('resize', handleResize) document.removeEventListener('keydown', handleKeydown) }) ``` ```javascript // ✅ useEventListener — cleanup автоматический import { useEventListener } from '@vueuse/core' useEventListener(window, 'resize', handleResize) useEventListener(document, 'keydown', handleKeydown) // При unmount компонента — оба listener удаляются автоматически ``` Разные targets: ```vue ``` Ручная отписка: ```javascript const cleanup = useEventListener(window, 'mousemove', (e) => { console.log(e.clientX, e.clientY) }) // Отписаться раньше unmount cleanup() ``` Множественные события: ```javascript // Один handler на несколько событий useEventListener(document, ['mousedown', 'touchstart'], (e) => { console.log('interaction started', e.type) }) ``` Keyboard shortcuts: ```vue ``` Click outside (хотя VueUse имеет отдельный `onClickOutside`): ```vue ``` ```javascript // Но лучше использовать готовый composable: import { onClickOutside } from '@vueuse/core' const dropdownRef = ref(null) onClickOutside(dropdownRef, () => { isOpen.value = false }) ``` С options (passive, capture): ```javascript useEventListener( window, 'scroll', handleScroll, { passive: true } // passive для скролла — улучшает производительность ) useEventListener( document, 'click', handleClick, { capture: true } // capture phase — перехват до bubbling ) ``` ## 📌 Реальные кейсы - **Drag-and-drop** — listener на `mousedown` для элемента, `mousemove` и `mouseup` на `document`. Без cleanup при unmount — утечка. `useEventListener` решает это. - **Горячие клавиши в SPA** — модальное окно слушает `Escape`. Без cleanup закрытие модалки оставляет "призрачный" listener, который реагирует на Escape когда модалки уже нет. - **WebSocket fallback** — `useEventListener(window, 'online/offline')` для определения обрыва сети и переподключения. ## Частые ошибки ```javascript // ❌ useEventListener внутри onMounted — не нужно onMounted(() => { useEventListener(window, 'resize', handler) // избыточно }) // ✅ Прямо в setup — VueUse сам привязывается к lifecycle useEventListener(window, 'resize', handler) ``` ```javascript // ❌ Новый handler на каждый рендер (если бы это был не setup) // В Vue setup вызывается один раз — проблемы нет // Но если создаёшь inline-функцию в watch: watch(someRef, () => { useEventListener(window, 'resize', () => { /* ... */ }) // Каждый вызов watch добавляет новый listener! }) // ✅ Listener в setup, condition в handler useEventListener(window, 'resize', () => { if (someRef.value) { // ... } }) ``` ```vue ``` ## Резюме `useEventListener` — безопасная обёртка над `addEventListener` с автоматическим cleanup. Используй для `window`, `document`, и программно создаваемых targets. Для DOM-элементов в template — используй `@event`. Поддерживает options (`passive`, `capture`), множественные события, ручную отписку. --- agentId: a9278a48436339d89 (use SendMessage with to: 'a9278a48436339d89' to continue this agent) total_tokens: 42402 tool_uses: 0 duration_ms: 480092 ---

Как использовать useEventListener из VueUse?