Composable: ```javascript // composables/useInfiniteScroll.js import { ref, onUnmounted, nextTick } from 'vue' export function useInfiniteScroll(fetchPage, options = {}) { const { pageSize = 20 } = options const items = ref([]) const page = ref(1) const isLoading = ref(false) const hasMore = ref(true) const error = ref(null) async function loadMore() { if (isLoading.value || !hasMore.value) return isLoading.value = true error.value = null try { const newItems = await fetchPage(page.value, pageSize) if (newItems.length < pageSize) { hasMore.value = false } items.value.push(...newItems) page.value++ } catch (err) { error.value = err } finally { isLoading.value = false } } function reset() { items.value = [] page.value = 1 hasMore.value = true error.value = null } return { items, isLoading, hasMore, error, loadMore, reset } } ``` ```javascript // composables/useIntersectionObserver.js import { onUnmounted, watch, ref } from 'vue' export function useIntersectionObserver(target, callback, options = {}) { const { rootMargin = '200px', threshold = 0 } = options let observer = null function start() { if (!target.value) return observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) callback() }, { rootMargin, threshold } ) observer.observe(target.value) } function stop() { observer?.disconnect() } // Начинаем наблюдение когда ref установлен watch(target, (el) => { stop() if (el) start() }, { immediate: true }) onUnmounted(stop) return { stop } } ``` Использование в компоненте: ```vue ``` Виртуализация для больших списков (тысячи элементов): ```vue ``` --- ## 📌 Реальные кейсы 🔹 **Социальная лента** -- бесконечный скролл постов с IntersectionObserver 🔹 **Каталог товаров** -- подгрузка товаров + сброс при смене фильтров (`reset()`) 🔹 **Чат** -- бесконечная прокрутка вверх (загрузка старых сообщений) --- ## Частые ошибки ```javascript // ❌ scroll event listener -- тормозит, дёргается window.addEventListener('scroll', () => { if (window.scrollY + window.innerHeight >= document.body.scrollHeight) { loadMore() } }) // ✅ IntersectionObserver -- эффективный, асинхронный const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) loadMore() }, { rootMargin: '300px' }) // ❌ Дублирование запросов -- loadMore вызывается несколько раз async function loadMore() { const data = await fetch(...) items.push(...data) } // ✅ Блокировка пока идёт загрузка async function loadMore() { if (isLoading.value || !hasMore.value) return isLoading.value = true // ... } // ❌ Не сбрасываешь при смене фильтров watch(filters, () => loadMore()) // Новые данные добавляются к старым // ✅ Сброс + перезагрузка watch(filters, () => { reset() loadMore() }) ``` --- ## Резюме | Элемент | Решение | |---|---| | Триггер загрузки | `IntersectionObserver` на sentinel element | | Предзагрузка | `rootMargin: '300px'` -- грузим заранее | | Большие списки | Virtual scrolling (рендерим только видимое) | | Смена фильтров | `reset()` + `loadMore()` | | Дедупликация | `isLoading` guard в `loadMore` | ---

{{ post.title }}

Как реализовать бесконечную прокрутку в Vue?