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-стили, транзишены, директивы. Разница не в том, кто лучше, а в том, что у них разные сильные стороны.

АспектVueReact
Кривая обученияМягче: шаблоны близки к 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 выходит в свет
2016Vue 2Виртуальный DOM, рендер-функции, рост экосистемы
2020Vue 3 и Composition APIЯдро на TypeScript, переиспользуемая логика через composables
2024Vue 3.5Стабильная база, улучшенная реактивность и производительность
2026Vue 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
Vue: прогрессивный фреймворк и где он в 2026

0

1

Войти