Vue
Vue: прогрессивный фреймворк и где он в 2026
2013 год, Эван Ю работает в Google над проектами на AngularJS. Angular мощный, но тяжёлый: чтобы добавить интерактивности на одну страницу, приходится тащить весь фреймворк и его концепции. Вопрос, который не отпускает Эвана: можно ли взять самое приятное из реактивного связывания данных Angular, но сделать это лёгким и подключаемым по кусочкам? В феврале 2014 он публикует первый релиз Vue. Через десять лет на Vue работают админки GitLab, интерфейсы Alibaba и Xiaomi, а версия 3.6 учится компилировать шаблоны прямо в DOM-операции без виртуального DOM.
- GitLab: значительная часть веб-интерфейса построена на Vue, миграция началась ещё во времена Vue 2
- Alibaba и Ant Design: китайский e-commerce гигант использует Vue в части продуктов, отсюда сильная азиатская комьюнити
- Nuxt: мета-фреймворк поверх Vue для SSR и статической генерации, аналог Next.js в мире React
- Laravel: PHP-фреймворк годами поставлял Vue как фронтенд по умолчанию, что принесло Vue огромную аудиторию backend-разработчиков
- Xiaomi, Adobe Portfolio, Grammarly: продакшен-интерфейсы, выбравшие Vue за скорость разработки и мягкий онбординг
Предварительные знания
- HTML и CSS на уровне вёрстки простой страницы
- JavaScript: функции, объекты, массивы, стрелочные функции, модули import/export
- Базовое понимание DOM: браузер строит дерево элементов из HTML
- Идея состояния приложения: данные, которые меняются во времени
Как один человек создал Vue в одиночку
Эван Ю изучал историю искусств, а программирование освоил позже. Работая в Google Creative Lab над прототипами на AngularJS, он постоянно упирался в вес фреймворка для небольших задач. В свободное время он начал вытаскивать понравившуюся идею - декларативное связывание данных через шаблоны - в отдельную маленькую библиотеку. В феврале 2014 он опубликовал Vue на Hacker News и Reddit, и проект быстро набрал звёзды. В отличие от React (Facebook) и Angular (Google), у Vue не было корпорации за спиной: проект жил на пожертвования и спонсоров. Vue 2 вышел в 2016, а Vue 3 в сентябре 2020 принёс Composition API и переписанное на TypeScript ядро. Эта независимость от единого вендора до сих пор остаётся частью идентичности Vue.
Что значит прогрессивный фреймворк
Слово прогрессивный в описании Vue значит постепенно внедряемый. Большинство фреймворков требуют принять архитектуру целиком: либо всё приложение на нём, либо никак. Vue устроен слоями. На минимальном уровне его можно подключить одним тегом script на существующую HTML-страницу и оживить один виджет, не трогая остальной сайт. На максимальном - развернуть полноценное приложение с маршрутизацией, хранилищем состояния и серверным рендерингом через Nuxt.
Та же библиотека масштабируется в большое приложение со сборкой через Vite, компонентами в файлах .vue и строгой типизацией на TypeScript. Разработчику не нужно сразу учить весь фреймворк, чтобы получить пользу. Можно начать с одной интерактивной формы и наращивать сложность по мере необходимости. Этим Vue отличается, например, от Angular, который исторически предполагает принятие всей платформы сразу.
Прогрессивность сделала Vue популярным среди backend-разработчиков. Laravel и Rails-проекты годами добавляли Vue точечно на серверные страницы, не переписывая весь фронтенд в SPA. Это дало Vue аудиторию, до которой React заходил труднее.
Что на практике означает 'прогрессивный фреймворк' применительно к Vue?
Vue против React: где каждый выигрывает
Vue и React решают одну задачу - декларативное построение интерфейса от состояния - но расставляют акценты по-разному. React даёт компонент как функцию, возвращающую JSX, и оставляет много решений на усмотрение разработчика и экосистемы. Vue даёт Single File Component, где шаблон, логика и стили лежат в одном файле .vue, и встроенные ответы на частые вопросы: scoped-стили, транзишены, директивы. Разница не в том, кто лучше, а в том, что у них разные сильные стороны.
| Аспект | Vue | React |
|---|---|---|
| Кривая обучения | Мягче: шаблоны близки к HTML, многое из коробки | Круче: JSX, выбор библиотек на каждый вопрос |
| Компонент | SFC: template, script, style в одном файле | Функция, возвращающая JSX |
| Реактивность | Автоматическая, на proxy, отслеживает зависимости сама | Ручная через useState и пересборку при рендере |
| Экосистема и рынок | Меньше, но цельнее (Nuxt, Pinia, Vue Router официальные) | Шире: больше библиотек, больше вакансий |
| Вендор | Независимый проект на спонсорах | За спиной Meta и React Foundation |
Официальные библиотеки Vue (Vue Router, Pinia, Nuxt) поддерживаются основной командой, поэтому в типичном проекте меньше развилок выбора. В React экосистема больше и фрагментированнее: на маршрутизацию, состояние и формы конкурируют десятки решений. Это плюс по гибкости и минус по числу решений, которые нужно принять. На рынке вакансий React исторически впереди по числу позиций, особенно в США.
Выбор между Vue и React редко технический. Чаще решают команда (что уже знают), найм (кого проще нанять в регионе) и экосистема под конкретный домен. Оба фреймворка способны построить любое из приложений, упомянутых в этом уроке.
В чём состоит реальное различие подходов Vue и React к компоненту?
Где Vue в 2026 году
К 2026 году Vue 3 полностью вытеснил Vue 2 (поддержка которого закончилась в конце 2023). Способ по умолчанию это Composition API со script setup поверх Vite. Версия 3.5 стабильна и используется в проде. Версия 3.6 находится в бете и приносит два крупных изменения: Vapor Mode и переход реактивного ядра на библиотеку alien-signals.
| Год | Событие | Почему важно |
|---|---|---|
| 2014 | Первый релиз Vue от Эвана Ю | Лёгкая альтернатива Angular выходит в свет |
| 2016 | Vue 2 | Виртуальный DOM, рендер-функции, рост экосистемы |
| 2020 | Vue 3 и Composition API | Ядро на TypeScript, переиспользуемая логика через composables |
| 2024 | Vue 3.5 | Стабильная база, улучшенная реактивность и производительность |
| 2026 | Vue 3.6 beta: Vapor Mode | Компиляция в прямые DOM-операции без виртуального DOM |
Vapor Mode это опциональный режим компиляции: вместо построения виртуального DOM шаблон превращается в прямые операции над реальным DOM, что даёт производительность уровня SolidJS. Режим экспериментальный и включается по выбору, существующий код продолжает работать как раньше. Реактивное ядро в 3.6 перешло на alien-signals - более быструю реализацию системы сигналов. Рекомендованный менеджер состояния это Pinia 3 со setup-хранилищами, маршрутизация через Vue Router, мета-фреймворк Nuxt 4, сборка Vite 8.
Где Vue не очевидный выбор: на рынке США React даёт больше вакансий и кандидатов. Для крошечного статического сайта любой фреймворк избыточен, хватит обычного HTML или генератора вроде Astro. Vue силён там, где важны быстрый старт, мягкий онбординг команды и цельная официальная экосистема.
Что приносит Vapor Mode, появившийся в бете Vue 3.6?
Связь с другими темами
Этот урок про мотивацию и место Vue среди фреймворков. Дальше курс идёт в практику:
- Настройка проекта — create-vue и Vite превращают идею в запущенное приложение. Первый практический шаг
- Single File Component — Формат .vue, в котором шаблон, логика и стили живут вместе. Ключевая особенность DX
- Основы реактивности — Proxy-based реактивность это техническое ядро Vue и причина, почему UI обновляется сам
Итог
- Vue создан Эваном Ю в одиночку и опубликован в феврале 2014 как попытка взять приятное связывание данных Angular, но сделать его лёгким и подключаемым постепенно
- Прогрессивность значит, что Vue можно добавить одним тегом script на одну страницу или развернуть до полноценного SPA через Nuxt - адаптируется под масштаб задачи
- Vue 3 (сентябрь 2020) принёс Composition API и ядро на TypeScript, версия 3.5 стабильна, 3.6 в бете добавляет Vapor Mode с компиляцией в прямые DOM-операции
- Vue выигрывает мягкой кривой обучения, опытом разработки на SFC и независимостью от одного вендора, тогда как у React шире экосистема и рынок вакансий
- К 2026 Composition API со script setup стал способом по умолчанию, а реактивное ядро перешло на alien-signals
Связанные уроки
- vue-02-setup — Поняв зачем Vue, разработчик ставит create-vue и Vite, чтобы перейти от теории к запущенному проекту
- vue-03-sfc-components — Single File Component это та самая фишка DX, ради которой многие выбирают Vue. Прямое продолжение разговора о сильных сторонах
- vue-05-reactivity-fundamentals — Реактивность на proxy это ядро Vue, главное техническое отличие от подхода React