Нативный `IntersectionObserver` требует ручного создания, подписки и уничтожения. VueUse берёт это на себя: автоматически создаёт observer при монтировании, следит за сменой target-элемента и чистит за собой при unmount. ```vue ``` **Lazy-loading изображений:** ```vue ``` Чистая версия lazy-load без дублирования: ```vue ``` **Бесконечный скролл:** ```vue ``` ## 📌 Реальные кейсы - **Анимация при скролле** -- элементы появляются с fade/slide, когда попадают в viewport - **Lazy-loading тяжёлых компонентов** -- рендеришь placeholder, а реальный компонент монтируешь только когда он вот-вот покажется - **Аналитика** -- трекинг видимости рекламных баннеров или секций для отправки событий - **Бесконечная прокрутка** -- sentinel-элемент в конце списка запускает подгрузку следующей страницы ## Частые ошибки ```javascript // ❌ Передача DOM-элемента вместо ref const el = document.querySelector('.target') useIntersectionObserver(el, callback) // не реактивно, не будет чиститься // ✅ Передача template ref const target = ref(null) useIntersectionObserver(target, callback) ``` ```javascript // ❌ Забыть остановить observer при одноразовом действии useIntersectionObserver(target, ([{ isIntersecting }]) => { if (isIntersecting) loadImage() // будет вызываться каждый раз при входе }) // ✅ Остановить после первого срабатывания const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => { if (isIntersecting) { loadImage() stop() } }) ``` ```javascript // ❌ threshold: 1 для элементов, которые могут быть длиннее viewport // Элемент длиннее экрана никогда не будет виден на 100% useIntersectionObserver(target, cb, { threshold: 1 }) // ✅ Для длинных элементов используй threshold: 0 или 0.1 useIntersectionObserver(target, cb, { threshold: 0.1 }) ``` ## Резюме `useIntersectionObserver` -- реактивная обёртка над нативным API. Ты передаёшь ref на элемент, колбэк и опционально настройки (threshold, rootMargin). Composable сам создаёт observer, следит за жизненным циклом компонента и возвращает функцию `stop()` для ручной остановки. Основные применения: lazy-load, анимации при скролле, бесконечная прокрутка, аналитика видимости. ---

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