Vue.js
Vue.js — свободная фронтенд JavaScript-библиотека и фреймворк с открытым исходным кодом для создания пользовательских интерфейсов и одностраничных приложений (SPA). Также часто используется сокращённое название «Vue» (произносится как «вью»)[5]. Библиотека разрабатывается и поддерживается Эваном Ю и активными участниками основной команды[6].
Общие сведения
| Vue.js | |
|---|---|
| Тип | JavaScript-библиотека |
| Автор | Эван Ю |
| Разработчики | Эван Ю и команда Core Team[1] |
| Написана на | TypeScript |
| Операционная система | кроссплатформенность |
| Первый выпуск | февраль 2014[2] |
| Аппаратная платформа | Веб-платформа |
| Последняя версия | 3.5 (1 сентября 2024) |
| Репозиторий | github.com/vuejs/core |
| Лицензия | MIT License[3] |
| Сайт | vuejs.org |
Обзор
Vue.js предлагает поэтапно расширяемую архитектуру, ориентированную на декларативный рендеринг и композицию компонентов. Ядро библиотеки реализует только слой представления[5]. Расширенные возможности для сложных приложений — роутинг, управление состоянием, инструменты сборки — предоставляются официально поддерживаемыми библиотеками и пакетами[7].
Vue.js позволяет расширять HTML с помощью атрибутов-директив[8]. Директивы предоставляют дополнительные возможности HTML-приложениям и могут быть как встроенными, так и пользовательскими.
История
Vue был создан Эваном Ю после работы в Google, где он участвовал в разработке проектов на AngularJS. Позже он пояснил: «Я подумал, что если бы я мог вытащить из Angular ту часть, которая мне особенно нравилась, и построить что-то действительно лёгкое»[9]. Первый коммит в репозиторий проекта датирован июлем 2013 года — тогда проект назывался «Seed»[10]. Публичный анонс состоялся в феврале 2014 года[11][12].
Названия основных версий часто отсылают к манге и аниме, а первые буквы выстраиваются в алфавитном порядке.
Выпуски
| Версия | Дата выпуска | Название | Окончание LTS | Завершение поддержки |
|---|---|---|---|---|
| 3.5 | 1 сентября 2024 | Tengen Toppa Gurren Lagann[13] | ||
| 3.4 | 28 декабря 2023 | Slam Dunk[14] | ||
| 3.3 | 11 мая 2023 | Rurouni Kenshin[15] | ||
| 3.2 | 5 августа 2021 | Quintessential Quintuplets[16] | ||
| 3.1 | 7 июня 2021 | Pluto[17] | ||
| 3.0 | 18 сентября 2020 | One Piece[18] | ||
| 2.7 | 1 июля 2022 | Naruto[19] | 31 декабря 2023 | 31 декабря 2023 |
| 2.6 | 4 февраля 2019 | Macross[20] | 18 марта 2022 | 18 сентября 2023 |
| 2.5 | 13 октября 2017 | Level E[21] | ||
| 2.4 | 13 июля 2017 | Kill la Kill[22] | ||
| 2.3 | 27 апреля 2017 | JoJo's Bizarre Adventure[23] | ||
| 2.2 | 26 февраля 2017 | Initial D[24] | ||
| 2.1 | 22 ноября 2016 | Hunter × Hunter[25] | ||
| 2.0 | 30 сентября 2016 | Ghost in the Shell[26] | ||
| 1.0 | 27 октября 2015 | Evangelion[27] | ||
| 0.12 | 12 июня 2015 | Dragon Ball[28] | ||
| 0.11 | 7 ноября 2014 | Cowboy Bebop[29] | ||
| 0.10 | 23 марта 2014 | Blade Runner[30] | ||
| 0.9 | 25 февраля 2014 | Animatrix[31] | ||
| 0.8 | 27 января 2014 | —[32] | первая публично анонсированная версия[11][12] | |
| 0.7 | 24 декабря 2013 | —[33] | ||
| 0.6 | 8 декабря 2013 | VueJS[34] | ||
После выхода новой мажорной версии (например, v3.y.z) последняя минорная версия предыдущего поколения (например, 2.x.y) получает статус LTS на 18 месяцев (исправления ошибок и проблемы безопасности), после чего ещё 18 месяцев поддерживается только безопасность[35].
Vue 3 официально выпущен в сентябре 2020 года. По данным «State of Vue.js Report 2025», 96 % опрошенных разработчиков использовали Vue 3.x. Тем не менее, 35 % продолжали использовать ветку Vue 2.7.x в течение последнего года, что говорит о востребованности второй версии даже после прекращения поддержки[36]. Более четверти респондентов отметили сложности при миграции с Vue 2 на Vue 3[37].
Эволюция управления состоянием
- 2015 — появление Vuex как официального решения для управления состоянием;
- 2021 — начало разработки Pinia как эксперимента Vuex 5;
- 2022 — Pinia становится официально рекомендуемым для новых проектов;
- 2023 — команда Vue анонсирует перевод Vuex в режим поддержки.
По данным State of Vue.js Report 2025, рекомендации core-команды отражаются на популярности: более 80 % разработчиков используют Pinia, в то время как использовать Vuex продолжает около 38,4 %, что говорит о востребованности старой библиотеки[36].
Возможности
Компоненты
Компоненты Vue расширяют базовые элементы HTML, инкапсулируя повторно используемый код. С точки зрения архитектуры компонент — это пользовательский тег, которому компилятор Vue приписывает логику поведения. На практике компонент представляет собой экземпляр Vue с заданными опциями[38].
Пример компонента Vue, реализующего кнопку со счётчиком нажатий:
<!doctype html>
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button-clicked :initial-count="0" />
</div>
<script>
const {
defineComponent,
ref,
computed,
watch,
watchEffect,
onMounted,
createApp
} = Vue
const ButtonClicked = defineComponent({
name: 'ButtonClicked',
props: {
initialCount: {
type: Number,
required: true
}
},
setup(props) {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
const handleClick = () => {
count.value += 1
}
watch(count, (newValue, oldValue) => {
console.log(`The value of count is changed from ${oldValue} to ${newValue}.`)
})
watchEffect(() => console.log(`Double the value of count is ${doubleCount.value}`))
onMounted(() => {
count.value = props.initialCount
})
return {
count,
doubleCount,
handleClick
}
},
template: `
<button @click="handleClick">Нажато <nowiki>{{ count }}</nowiki> раз(а)</button>
`
})
const app = createApp({})
app.component('ButtonClicked', ButtonClicked)
app.mount('#app')
</script>
</body>
</html>Шаблоны
Vue использует HTML-ориентированный синтаксис шаблонов, который связывает отображаемое состояние DOM с данными экземпляра Vue. Все шаблоны являются валидным HTML и могут быть обработаны стандартными браузерами и парсерами. При сборке шаблоны компилируются в функции для виртуального DOM: таким образом, компоненты сначала отрисовываются в памяти, и только затем изменения применяются к реальному DOM. Система реактивности позволяет пересчитывать минимально возможное число компонентов и обновлять только затронутые участки при изменении состояния приложения[39].
Разработчики могут строить UI и с помощью шаблонов, и через JavaScript-функции рендеринга (например, с использованием hyperscript или JSX)[40]. Такой подход облегчает построение интерфейсов из компонентов[41].
Реактивность
Vue реализует систему реактивности поверх обычных объектов JavaScript и оптимизированного повторного рендеринга. Каждый компонент отслеживает свои реактивные зависимости во время отрисовки, так что система знает — что и когда именно пересчитывать и какие компоненты обновлять[42].
Переходы
Vue поддерживает различные инструменты для организации анимаций и CSS-переходов при появлении, обновлении или удалении элементов из DOM. Это включает:
- автоматическое добавление CSS-классов для переходов и анимаций;
- интеграцию сторонних CSS-библиотек, например Animate.css;
- использование JavaScript-хуков для управления состояниями DOM во время переходов;
- поддержку внешних JS-библиотек анимаций вроде Velocity.js.
Последовательность перехода:
- Если к элементу привязан transition-компонент, Vue определяет наличие CSS-анимаций и добавляет/удаляет классы в нужные моменты.
- JavaScript-хуки, переданные в transition, вызываются по завершении определённых стадий.
- Если ни CSS, ни JS-хуков нет, операции над DOM проводятся мгновенно при следующем кадре рендеринга[43][44].
Маршрутизация
Обычная проблема SPA — невозможность предоставить ссылку на конкретную «внутреннюю» страницу без дополнительных ухищрений. SPA обычно возвращают только один HTML-файл с единственным адресом. Для решения этой задачи многие роутеры используют URL c «hashbang» (#!), но современные браузеры с HTML5 позволяют реализовать адресацию и без этих символов.
Vue предоставляет интерфейс для изменения отображения контента в зависимости от текущего пути URL при любых событиях (например, переход по ссылке или ввод из адресной строки). Сам Vue не содержит роутера, но официальный пакет vue-router реализует полноценную маршрутизацию, поддержку истории, передачу параметров URL (например, для сброса пароля), вложенные маршруты, синхронизацию состояния блока и гибкую работу с эффектами перехода. Компоненты лишь привязываются к нужным маршрутам, а родительские указывают области отображения дочерних[45].
<div id="app">
<router-view></router-view>
</div>
...
<script>
...
const User = {
template: '<div>User <nowiki>{{ $route.params.id }}</nowiki></div>'
};
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
});
...
</script>Код выше:
- Настраивает фронтенд-маршрут вида
website.com/user/<id>; - рендерит нужный компонент User, определённый ранее;
- позволяет компоненту получить id пользователя —
$route.params.id; - данный шаблон (в зависимости от параметров) будет встроен в
<router-view></router-view>внутри div#app; - итоговая разметка для обращения к
website.com/user/1будет:
<div id="app">
<div>
<div>User 1</div>
</div>
</div>
Экосистема
Ядро Vue дополняется большим числом официальных инструментов и сторонних библиотек.
Официальные инструменты
- Devtools — расширение для браузерных инструментов разработчика для отладки приложений на Vue.js;
- Vite — стандартный инструмент быстрой разработки на Vue.js;
- Vue Loader — загрузчик webpack, позволяющий описывать компоненты в формате Single-File Components (SFC);
- Коллекция плагинов Vue.js — около 100 расширений и экосистемных библиотек для различных задач[47].
Официальные библиотеки
Видеокурсы
- Vue School — курсы и экспертные видео по Vue.js и экосистеме[48].
Библиотеки управления состоянием
- Pinia — официальное решение с модульной архитектурой;
- Vuex — устаревшая библиотека, находится в режиме поддержки;
- VueUse — набор из более 200 утилит composition API, включая помощники для управления состоянием.
Ресурсы сообщества и основной команды
- State of Vue.js Report — ежегодный аналитический отчёт от Monterail (Vue & Nuxt Official Partner, с 2017 года). Каждое издание содержит уникальные данные опросов, тренды экосистемы и кейсы крупных компаний; последний, пятый выпуск (март 2025), создан при участии Эвана Ю и команд Vue и Nuxt[49].
Хотя экосистема Vue.js в целом высоко развита, разработчики отмечали отдельные пробелы (опрос State of Vue.js Report 2025): 22 % опрошенных назвали среди них отсутствие мощных официальных компонентных библиотек уровня MUI или Radix, а также ограниченные инструменты тестирования. Отмечался спрос на более модульные, готовые к использованию корпоративные решения для дашбордов, электронной коммерции и мульти-анимации на уровне Framer Motion[50].
Сравнение с другими фреймворками
Веб-фреймворки на основе JavaScript, такие как Vue, предлагают широкие возможности, но накладывают определённые ограничения. Они расширяют стандартные средства веба (маршрутизация, компонентный подход, управление состоянием), но, несмотря на эволюцию Web Components, появления современных JS API (Fetch, ES Modules), Shadow DOM и других технологий, фреймворки сохраняют популярность благодаря эффективности, поддержке масштабирования, удобству паттернов, инструментам оптимизации и разработке крупных проектов[51][52][53].
Сверх этого, такие слои абстракции приводят к увеличению bundle-объёма, потенциальным издержкам по производительности и росту сложности. Современные фреймворки (например, Vue 3) предлагают решения этих проблем: конкурентный рендеринг, tree-shaking, селективную гидратацию. Такие приёмы улучшают работу на реальных проектах, но преимущества зависят от конкретной архитектуры приложения. Лёгковесные альтернативы, вроде Svelte и Preact, реализуют иной подход: Svelte предварительно компилирует компоненты в JavaScript, отказываясь от виртуального DOM совсем, Preact строит минималистичный совместимый аналог React. Выбор подходящего инструмента зависит от задач команды, требований к производительности и инфраструктуры проекта[51][52][53].
Новое поколение фреймворков (enhance.dev, Astro, Fresh) стремятся максимально использовать стандартные веб-технологии, уменьшая глубину абстракций и зависимость от инструментов сборки[54][55][56]. Они фокусируются на прогрессивном улучшении, серверном рендеринге и оптимизации производительности: Astro выводит только статический HTML и гидрирует только интерактивные участки; Fresh строит серверную вёрстку с нулевой нагрузкой на клиент; enhance.dev использует шаблон Web Components. Общий подход — выносить логику на сервер/этап сборки, используя JS на клиенте только при необходимости для интерактивности, что подходит для производительных и контентных проектов[51][52][53].