Задачи на Vue: написать компонент или composable

↑ 4.1 Vue 3: основы, компоненты, Composition API · ← Предыдущая

Обязательно~4 мин чтенияУровень: middle

Зачем это на собесе

Live coding на Vue: обычно небольшой компонент или composable за 30–40 минут.

Задачи

1. Компонент «Счётчик» с v-model, min/max и шагом.

Решение

\<script setup lang="ts">
const props = withDefaults(defineProps<{ min?: number; max?: number; step?: number }>(), { min: 0, max: Infinity, step: 1 });
const model = defineModel\<number>({ default: 0 });
const inc = () => (model.value = Math.min(props.max, model.value + props.step));
const dec = () => (model.value = Math.max(props.min, model.value - props.step));
</script>
\<template\>
  <div role="group" aria-label="Количество">
    \<button type="button" :disabled="model <= min" @click="dec" aria-label="Меньше">−</button\>
    \<output>{{ model }}</output\>
    \<button type="button" :disabled="model >= max" @click="inc" aria-label="Больше">+</button\>
  </div>
</template>

2. Composable useDebouncedRef(value, delay).

Решение

export function useDebouncedRef\<T>(value: T, delay = 300) {
  let timer: ReturnType\<typeof setTimeout>;
  return customRef\<T>((track, trigger) => ({
    get() { track(); return value; },
    set(v) { clearTimeout(timer); timer = setTimeout(() => { value = v; trigger(); }, delay); },
  }));
}

3. Поиск с подсказками: debounce, отмена запроса, состояния loading/error/empty.

Что оценивают

Debounce ввода, AbortController (гонки), обработку ошибок, key в списке, доступность (role="listbox", стрелки, Enter), очистку при размонтировании.

4. Бесконечный список: подгрузка при прокрутке.

Решение

Sentinel-элемент + useIntersectionObserver; защита от повторных запросов (loading, hasMore); сохранение позиции прокрутки; отмена при размонтировании.

5. Вкладки (Tabs/Tab) через provide/inject или component :is, клавиатурная навигация.

6. Модальное окно: Teleport, focus trap, закрытие по Esc и клику вне, блокировка прокрутки, aria-modal.

7. Реализуйте useLocalStorage(key, default) с синхронизацией между вкладками.

Решение

export function useLocalStorage\<T>(key: string, def: T) {
  const read = () => { try { const v = localStorage.getItem(key); return v ? (JSON.parse(v) as T) : def; } catch { return def; } };
  const state = ref(read()) as Ref\<T>;
  watch(state, (v) => localStorage.setItem(key, JSON.stringify(v)), { deep: true });
  useEventListener(window, "storage", (e: StorageEvent) => { if (e.key === key) state.value = read(); });
  return state;
}

8. Найдите ошибки в коде.

<script setup>
const { user } = useUser();          // user — не реактивен, если composable вернул reactive
const list = reactive([]);
async function load() { list = await api.list(); }       // замена reactive
</script>
<template><li v-for="(x, i) in list" :key="i" v-if="x.active">{{ x.name }}</li></template>

Ответ

Потеря реактивности при деструктуризации и присваивании list, v-if вместе с v-for, ключ по индексу; исправление — ref/toRefs, computed для фильтрации, key = x.id.

Как вести себя на live coding

1. Уточните требования (props, события, доступность, состояния).
2. Набросайте интерфейс компонента (props/emits/slots), затем реализацию.
3. Обработайте состояния: loading/empty/error.
4. Учитывайте доступность и очистку ресурсов.
5. Назовите, что бы добавили (тесты, оптимизация).

Связанные темы

• Testing Library для Vue: тесты с позиции пользователя
• Настройка роутера, history-режимы