Composable для debounce: ```javascript // composables/useDebouncedRef.js import { ref, watch } from 'vue' export function useDebouncedRef(initialValue, delay = 300) { const value = ref(initialValue) const debouncedValue = ref(initialValue) let timer = null watch(value, (newVal) => { clearTimeout(timer) timer = setTimeout(() => { debouncedValue.value = newVal }, delay) }) return { value, debouncedValue } } ``` Composable для поиска: ```javascript // composables/useSearch.js import { ref, watch, onUnmounted } from 'vue' export function useSearch(searchFn, options = {}) { const { debounce = 300, minLength = 2, immediate = false } = options const query = ref('') const results = ref([]) const isSearching = ref(false) const error = ref(null) let timer = null let controller = null async function search(searchQuery) { // Отменяем предыдущий запрос controller?.abort() if (searchQuery.length < minLength) { results.value = [] return } controller = new AbortController() isSearching.value = true error.value = null try { const data = await searchFn(searchQuery, { signal: controller.signal }) results.value = data } catch (err) { if (err.name !== 'AbortError' && err.code !== 'ERR_CANCELED') { error.value = err } } finally { isSearching.value = false } } watch(query, (newQuery) => { clearTimeout(timer) if (newQuery.length < minLength) { results.value = [] isSearching.value = false return } timer = setTimeout(() => search(newQuery), debounce) }) function clear() { query.value = '' results.value = [] clearTimeout(timer) controller?.abort() } onUnmounted(() => { clearTimeout(timer) controller?.abort() }) return { query, results, isSearching, error, clear } } ``` Использование: ```vue ``` Поиск с подсветкой совпадений: ```vue ``` Поиск с историей (recent searches): ```javascript // composables/useSearchHistory.js import { ref } from 'vue' const STORAGE_KEY = 'search_history' const MAX_ITEMS = 10 export function useSearchHistory() { const history = ref(loadHistory()) function loadHistory() { try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]') } catch { return [] } } function add(query) { const trimmed = query.trim() if (!trimmed) return // Удаляем дубликат, добавляем в начало history.value = [ trimmed, ...history.value.filter(q => q !== trimmed) ].slice(0, MAX_ITEMS) localStorage.setItem(STORAGE_KEY, JSON.stringify(history.value)) } function remove(query) { history.value = history.value.filter(q => q !== query) localStorage.setItem(STORAGE_KEY, JSON.stringify(history.value)) } function clear() { history.value = [] localStorage.removeItem(STORAGE_KEY) } return { history, add, remove, clear } } ``` --- ## 📌 Реальные кейсы 🔹 **Глобальный поиск** -- Cmd+K, debounce 300ms, AbortController, клавиатурная навигация по результатам 🔹 **Autocomplete** -- поиск + выпадающий список + клик по подсказке заполняет инпут 🔹 **Фильтрация таблицы** -- debounce 500ms, поиск по нескольким полям одновременно --- ## Частые ошибки ```javascript // ❌ Без debounce -- запрос на каждый символ watch(query, async (q) => { results.value = await search(q) // 10 символов = 10 запросов }) // ✅ Debounce 300-500ms watch(query, (q) => { clearTimeout(timer) timer = setTimeout(() => search(q), 300) }) // ❌ Race condition -- результаты старого запроса приходят после нового // Ввёл "vue" -- запрос. Ввёл "react" -- запрос. "vue" ответил последним. // ✅ AbortController отменяет предыдущий controller?.abort() controller = new AbortController() // ❌ Поиск при пустой строке watch(query, (q) => search(q)) // Пустой запрос = все данные? // ✅ Минимальная длина if (q.length < 2) { results.value = []; return } ``` --- ## Резюме | Элемент | Решение | |---|---| | Debounce | 300-500ms задержка перед запросом | | Отмена | `AbortController` при новом вводе | | Min length | Не ищем при < 2 символах | | Подсветка | RegExp replace с `` | | История | `localStorage` + последние 10 запросов | ---

Как реализовать поиск с debounce в Vue?