Учебник Vue.js для начинающих

Программа курса

1. 1 Введение во Vue

   1. Что такое Vue и его философия

      Vue — прогрессивный фреймворк для интерфейсов: декларативность, реактивность и компоненты. Чем он отличается от ручного DOM и почему его называют прогрессивным.

   2. Создание проекта на Vite

      Создаём проект Vue через npm create vue@latest на базе Vite: команды, структура папок, запуск dev-сервера и сборка для продакшена.

   3. Single File Component (.vue)

      SFC — однофайловый компонент Vue: блоки template, script и style в одном файле .vue. Зачем такой формат и как он устроен.

   4. Первое приложение и интерполяция

      Собираем первое приложение Vue: реактивная переменная через ref, вывод в шаблоне через {{ }} и понимание, как данные превращаются в интерфейс.

2. 2 Шаблоны и директивы

   1. Привязка атрибутов: v-bind и :

      Директива v-bind (краткая запись :) связывает атрибуты HTML с данными компонента: динамические href, src, disabled и любые другие атрибуты.

   2. Условный рендеринг: v-if, v-else, v-show

      Условный вывод во Vue: v-if/v-else-if/v-else добавляют и убирают элементы из DOM, а v-show переключает видимость через CSS. Когда что выбирать.

   3. Списки: v-for и key

      Рендеринг списков во Vue через v-for: перебор массивов и объектов, доступ к индексу и зачем обязательно нужен уникальный атрибут key.

   4. События, v-model, классы и стили

      Обработка событий через v-on (@), двусторонняя привязка форм с v-model и динамические классы и стили через :class и :style.

3. 3 Реактивность и состояние

   1. ref и reactive: два способа хранить состояние

      ref и reactive — две функции для реактивного состояния во Vue 3. Чем они отличаются, почему ref нужен .value и какой выбирать на практике.

   2. Реактивность под капотом и ловушка деструктуризации

      Как работает реактивность Vue через Proxy и почему деструктуризация reactive-объекта ломает связь с интерфейсом. Главная ошибка новичков и как её избежать.

   3. Вычисляемые свойства: computed

      computed создаёт производные значения, которые автоматически пересчитываются при изменении зависимостей и кешируются. Чем computed лучше методов.

   4. Наблюдатели: watch и watchEffect

      watch и watchEffect реагируют на изменения реактивных данных побочными эффектами: запросы к API, сохранение в localStorage, логирование. Разница и когда что брать.

4. 4 Компоненты

   1. Создание и регистрация компонентов

      Как создать компонент Vue, импортировать и использовать его внутри другого. Дерево компонентов, локальная регистрация в script setup и правила именования.

   2. Пропсы: defineProps и валидация

      Пропсы передают данные от родителя к дочернему компоненту. Объявление через defineProps, указание типов, обязательность, значения по умолчанию и однонаправленный поток.

   3. События и слоты

      Кастомные события от ребёнка к родителю через defineEmits и v-on, а также слоты для передачи разметки внутрь компонента: дефолтный и именованные слоты.

   4. v-model на компоненте и provide/inject

      Двусторонняя привязка на собственном компоненте через defineModel и передача данных сквозь дерево без пропсов с помощью provide/inject.

5. 5 Жизненный цикл и композиция

   1. Хуки жизненного цикла

      Жизненный цикл компонента Vue: onMounted, onUnmounted, onUpdated и другие хуки. Когда вызывается каждый и для чего нужен.

   2. Composables: переиспользуемая логика

      Composable — функция, инкапсулирующая реактивную логику для переиспользования между компонентами. Как написать свой useCounter и зачем соглашение об имени use.

   3. Работа с API: загрузка, ошибки, состояние

      Загрузка данных с сервера через fetch в onMounted: три состояния — загрузка, успех, ошибка. Паттерн с loading/error/data и вынос в composable useFetch.

   4. Шаблонные ссылки: ref на элемент

      Template refs — прямой доступ к DOM-элементу из компонента: ref в шаблоне, одноимённая переменная в скрипте и доступность только после onMounted.

6. 6 Экосистема и практика

   1. Маршрутизация: Vue Router

      Vue Router добавляет навигацию между «страницами» в SPA: определение routes, компоненты router-link и router-view, переход без перезагрузки страницы.

   2. Управление состоянием: Pinia

      Pinia — официальное хранилище состояния Vue. Зачем нужен общий store, как описать state, getters и actions и использовать его в любом компоненте.

   3. Практика: список задач с фильтрами

      Собираем мини-приложение todo: добавление и удаление задач, отметка выполненных, фильтры «все/активные/завершённые» и счётчик — всё на изученном материале.

   4. Options API, scoped-стили и что дальше

      Сравнение Composition API и Options API, особенности scoped-стилей и дорожная карта: куда расти после основ Vue, включая Nuxt.

7. 7 Реактивность под капотом

   1. Как работает реактивность: Proxy и отслеживание зависимостей

      Реактивность Vue 3 на Proxy: ловушки get и set, операции track и trigger, эффекты, чем Proxy лучше Object.defineProperty из Vue 2 для новых ключей и массивов.

   2. ref, reactive, shallowRef, toRaw, markRaw

      Когда брать ref, а когда reactive: устройство .value, поверхностная реактивность shallowRef и shallowReactive, исключение объекта из реактивности через toRaw и markRaw.

   3. watch против watchEffect, flush и nextTick

      Разница watch и watchEffect, тайминг flush pre/post/sync, асинхронное обновление DOM и nextTick, остановка наблюдателей и планировщик Vue под капотом.

   4. Ловушки реактивности

      Главные ловушки реактивности Vue 3: потеря связи при деструктуризации и спасение через toRefs, реактивность массивов и Map/Set, замена reactive-объекта целиком.

8. 8 Продвинутые компоненты

   1. Слоты вглубь: scoped и динамические

      Scoped-слоты Vue 3: как ребёнок передаёт данные в слот через v-slot, динамические имена слотов и renderless-компоненты, отдающие только данные без разметки.

   2. provide/inject: внедрение зависимостей

      provide и inject во Vue 3: передача данных через много уровней без пропсов, типизация через InjectionKey, реактивный provide и выбор между inject и пропсами.

   3. Асинхронные компоненты и Suspense

      Асинхронные компоненты Vue 3: defineAsyncComponent и ленивая загрузка через import(), Suspense для async setup, состояния загрузки и ошибки, разбиение бандла.

   4. Teleport и обработка ошибок

      Teleport во Vue 3 для модалок и тултипов и обработка ошибок: onErrorCaptured, границы ошибок, как поймать ошибку дочернего поддерева и показать запасной UI.

9. 9 Composables и управление состоянием

   1. Как писать собственные composables

      Конвенция use*, что возвращать из composable, реактивные аргументы через toValue, очистка эффектов и правильное переиспользование логики в Vue 3.

   2. Паттерны composables: useLocalStorage, useEventListener

      Реализуем сами популярные composables в духе VueUse: useEventListener с автоочисткой, useLocalStorage с синхронизацией хранилища и useTimeout на таймерах.

   3. Pinia вглубь: stores, getters, actions, плагины

      Глубокий разбор Pinia: определение store, state/getters/actions, использование вне компонентов, написание плагинов и сравнение с Vuex.

   4. Паттерны состояния: когда Pinia, когда composable, когда provide

      Локальное против глобального состояния во Vue: когда хватит composable, когда нужен provide/inject, а когда стоит брать Pinia. Критерии выбора инструмента.

10. 10 Производительность, TypeScript и тестирование

    1. Виртуальный DOM и обновления

       Как Vue обновляет реальный DOM: virtual DOM, diffing, патчинг, роль key в v-for и что именно заставляет компонент перерисоваться.

    2. Оптимизация: v-memo, computed, ленивость, KeepAlive

       Практическая оптимизация Vue: кэш computed, v-memo для тяжёлых списков, ленивые компоненты через defineAsyncComponent, KeepAlive и виртуализация длинных списков.

    3. Vue с TypeScript

       Vue 3 и TypeScript: типизация defineProps и defineEmits, типы для ref и reactive, generic-компоненты и типобезопасные composables в script setup.

    4. Тестирование компонентов

       Тестирование Vue-компонентов на Vitest и Vue Test Utils: монтирование mount, проверка рендера, эмуляция событий, await nextTick и асинхронные обновления.