Vue 3: Обзор

Vue 3 — прогрессивный фреймворк для современного веба 🟢

Добро пожаловать в самый дружелюбный JavaScript-фреймворк! Vue 3 — это не просто инструмент, это философия постепенного усложнения. Начинаешь с простого скрипта в HTML, дорастаешь до полноценного SPA с SSR — и на каждом шаге Vue рядом! 🚀

---

Почему Vue 3? 🤔

Vue 3 вышел в сентябре 2020 года и принёс революционные изменения:

• Composition API — логика по фичам, а не по типам опций
• Лучший TypeScript — написан с нуля на TS
• Меньший бандл — tree-shaking из коробки
• Быстрее — переписанный рендерер, лучше Virtual DOM
• Fragments — несколько корневых элементов
• Teleport — рендеринг вне дерева компонентов
• Suspense — асинхронные компоненты с загрузкой

---

Философия Composition API 🧩

Options API (Vue 2) группировал код по типу: все data в одном месте, все methods в другом. Для маленьких компонентов — окей. Для больших — хаос: чтобы понять одну фичу, прыгаешь по всему файлу.

Composition API группирует код по фиче: всё что связано с авторизацией — в одном месте, всё что связано с корзиной — в другом.

Options API (Vue 2)          Composition API (Vue 3)
─────────────────────        ─────────────────────────
data() {                     // === ФИЧА: авторизация ===
  user: null,        ←──┐    const user = ref(null)
  cart: [],          ←──│──┐ const login = async () => {}
}                          │ const logout = () => {}
methods: {                 │
  login() {},        ──────┘ // === ФИЧА: корзина ===
  logout() {},               const cart = ref([])
  addToCart() {},    ──────┐ const addToCart = (item) => {}
}                          └ const total = computed(() => {})
computed: {
  total() {},        ──────── // Всё вместе, но разбросано!
}

---

Vue 3 экосистема 🌍

Инструмент	Назначение	Версия
Vite	Сборщик/девсервер	5.x
Vue Router 4	Клиентская маршрутизация	4.x
Pinia	Управление состоянием	2.x
Vitest	Unit тестирование	1.x
VueUse	Коллекция composables	10.x
Nuxt 3	Full-stack фреймворк	3.x
Volar	VS Code плагин	latest
Vue DevTools	Дебаггер в браузере	7.x

---

Vue 3 vs React vs Angular 📊

Критерий	Vue 3	React	Angular
Кривая обучения	🟢 Пологая	🟡 Средняя	🔴 Крутая
Размер	~34KB	~44KB	~143KB
Язык	JS/TS	JSX/TSX	TypeScript
Состояние	Pinia	Redux/Zustand	NgRx/Services
Шаблоны	HTML-подобные	JSX	HTML+директивы
Реактивность	Proxy-based	useState hooks	Zone.js
SSR	Nuxt 3	Next.js	Angular Universal
Мобильный	Ionic/Capacitor	React Native	Ionic
Компании	Alibaba, GitLab	Meta, Airbnb	Google, Enterprise

---

Когда выбирать Vue 3? 🎯

Vue 3 — отличный выбор когда:

• Команда не хочет глубоко погружаться в TypeScript сразу
• Нужен быстрый старт с хорошей документацией
• Проект средней сложности (SPA, дашборды, интерактивные сайты)
• Важна читаемость шаблонов для дизайнеров/верстальщиков
• Нужна гибкость: от простого скрипта до full-stack (Nuxt)

Лучше рассмотреть альтернативы когда:

• Огромная enterprise команда с жёсткими стандартами → Angular
• Нужна максимальная экосистема/найм → React
• Мобильное приложение → React Native

---

Таблица всех 30 уроков 📚

№	Урок	Тема
1	introduction	Что такое Vue 3: архитектура, MVVM, Virtual DOM
2	setup-vite	Установка через Vite, структура проекта, SFC
3	composition-api	Composition API: script setup, defineProps, defineEmits
4	options-api	Options API: data, methods, computed, watch
5	reactivity	Реактивность: ref, reactive, readonly, toRefs
6	computed-watch	computed и watch: watchEffect, deep, immediate
7	templates-directives	Шаблоны и директивы: v-if, v-for, v-bind, v-model
8	components	Компоненты: регистрация, динамические, KeepAlive
9	props-emits	Props и Emits: defineProps, withDefaults, v-model
10	slots	Слоты: default, named, scoped slots
11	lifecycle-hooks	Lifecycle Hooks: onMounted, onUpdated, onUnmounted
12	composables	Composables: useCounter, useFetch, useLocalStorage
13	provide-inject	Provide / Inject: dependency injection в Vue
14	vue-router	Vue Router 4: routes, router-link, router-view
15	router-advanced	Роутинг: Guards, Lazy Loading, meta
16	pinia	Pinia: defineStore, state, getters, actions
17	pinia-advanced	Pinia: subscriptions, plugins, persist
18	vuex	Vuex 4: state, mutations, actions, modules
19	transitions-animations	Переходы: Transition, TransitionGroup, CSS
20	teleport-suspense	Teleport и Suspense: модальные окна, async
21	custom-directives	Кастомные директивы: v-focus, v-tooltip
22	async-components	Асинхронные компоненты: defineAsyncComponent
23	renderless-components	Renderless компоненты: паттерн compound
24	testing-vitest	Тестирование: Vitest + Vue Test Utils
25	testing-e2e	E2E: Playwright + Cypress
26	ssr-vue	SSR: Nuxt 3, Vite SSR, hydration
27	performance	Производительность: v-memo, shallowRef, lazy
28	typescript-vue	TypeScript в Vue 3: типы props, emits, slots
29	patterns	Паттерны: composables, render functions, plugin
30	vue3-vs-react	Vue 3 vs React: полное сравнение

---

Быстрый старт — три строки кода 🏃

<!-- index.html — Vue без сборщика! -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
  Vue.createApp({ data() { return { message: 'Привет, Vue 3! 🟢' } } }).mount('#app')
</script>

Или через Vite (правильный путь для реальных проектов):

npm create vue@latest my-app
cd my-app
npm install
npm run dev

---

Что ждёт тебя в этом курсе 🗺️

Мы пройдём путь от Привет, мир! до полноценного приложения с роутингом, состоянием и тестами. Каждый урок — это теория + практика + интерактивный плейграунд прямо в браузере.

Не бойся экспериментировать — Vue прощает ошибки и подсказывает решения через понятные сообщения об ошибках! 💪

Поехали! 🚀