← Все сеты

Vue 3: Composition API и архитектура

Практика по Vue 3: реактивность, компоненты, маршрутизация и работа с состоянием.

Уровень: Junior+•Оценка времени: 120 мин

Цели сета

  • Уверенно использовать ref/reactive/computed
  • Строить переиспользуемую логику через composables
  • Понимать архитектуру Vue-приложения

Что ты сделаешь в сете

  • Собрать список задач с фильтрами и реактивной статистикой.
  • Вынести сетевую и форменную логику в composables.
  • Подключить router + Pinia для сценария личного кабинета.
  • Добавить обработку ошибок и fallback-состояния UI.

Рекомендуемые уроки

Введение в Vue 3
Vue: Основы
Template синтаксис Vue
Vue: Основы
ref() и reactive() в Vue 3
Vue: Основы
Computed properties в Vue
Vue: Основы
watch() и watchEffect() в Vue 3
Vue: Основы
Обработка событий в Vue
Vue: Основы
v-bind: динамические атрибуты
Vue: Основы
v-if, v-else-if, v-else и v-show
Vue: Основы
v-for: рендеринг списков
Vue: Основы
v-model: двусторонняя привязка данных
Vue: Основы
Template Refs: прямой доступ к DOM
Vue: Основы
Динамические классы и стили
Vue: Основы

Что должно получиться на выходе

  • Vue 3 приложение с composition-first архитектурой.
  • Набор composables и схема их повторного использования.
  • Краткий документ по структуре папок и слоёв приложения.

Критерии готовности

  • Composables переиспользуемы и не завязаны на конкретный экран.
  • Состояние Pinia структурировано по доменам.
  • Критичные сценарии UI покрыты загрузкой и ошибками.

Частые ошибки

  • Смешивать запросы, мутации состояния и разметку в одном SFC.
  • Не контролировать side effects в watch/watchEffect.
  • Дублировать логику в компонентах вместо composables.

Что положить в портфолио

Покажи Vue-проект, где ты сознательно разделил composables, сторы и UI-компоненты и добился предсказуемой архитектуры.

FAQ по этому сету

Сколько времени закладывать на сет «Vue 3: Composition API и архитектура»?

Ориентир: 120 минут. Лучше разделить прохождение на 2-3 подхода с обязательным разбором ошибок.

Как понять, что сет пройден качественно?

Оцени себя по критериям готовности: код стабилен, edge-cases закрыты, решения читаемы и объяснимы на собеседовании.

Что добавить в портфолио после выполнения сета?

Покажи Vue-проект, где ты сознательно разделил composables, сторы и UI-компоненты и добился предсказуемой архитектуры.

© 2026 Road to JS · ИП Добрынина Екатерина Владимировна

ИНН 482425719598 · ОГРНИП 326480000011329 · qamos@bk.ru

Старт с нуляПлан 30 днейПодготовка к интервьюГайдыГлоссарийПрактикаТемыКонфиденциальностьОфертаВозврат