Главная » Полезное

Что такое Vue.js: для чего нужен, как работает, плюсы и минусы

Что такое Vue.js: для чего нужен, как работает, плюсы и минусы Полезное
На чтение 10 мин Просмотров 781 Опубликовано

Vue.js (Vue) — это JavaScript-фреймворк с открытым кодом (лицензия MIT) для создания пользовательских интерфейсов: от одного интерактивного блока на странице до полноценного одностраничного приложения (SPA). Разработчик описывает, как интерфейс зависит от данных, а Vue сам обновляет страницу, когда данные меняются.

Содержание

  1. Коротко о происхождении
  2. Мини-словарь: что входит в Vue
  3. Для чего нужен Vue
  4. Как работает Vue: первый полный пример
  5. Частая ошибка: потеря реактивности
  6. Vue 3: Composition API и Options API
  7. Как начать проект на Vue
  8. Экосистема Vue в 2026 году
  9. Плюсы и минусы Vue
  10. Выводы
  11. Где применяется / связь с практикой
  12. FAQ

Важно сразу развести три уровня. Ядро Vue — реактивность, компоненты и шаблоны. Однофайловые компоненты (.vue) и сборщик Vite — способ организовать код проекта. Экосистема — маршрутизация (Vue Router), хранилище состояния (Pinia), серверный рендеринг (Nuxt). Когда говорят «Vue — прогрессивный фреймворк», имеют в виду именно это: ядро можно подключить к одной странице, а остальные уровни добавлять по мере роста проекта.

Примеры в статье проверены 24.09.2026 на Vue 3.5.43 (актуальная стабильная ветка на эту дату; 3.6 пока в стадии release candidate) и Node.js 24.21.

Коротко о происхождении

Vue создал Эван Ю (Evan You); первый публичный релиз вышел в феврале 2014 года. Широкую известность фреймворк получил в 2015 году, когда его начали продвигать в сообществе PHP-фреймворка Laravel. Vue 3 вышел в сентябре 2020 года и с 2022 года ставится по умолчанию. Поддержка Vue 2 завершена 31 декабря 2023 года, поэтому новые проекты стоит начинать на Vue 3.

Мини-словарь: что входит в Vue

Термин Что это Пример
Компонент Самостоятельный кусок интерфейса со своими данными, шаблоном и логикой кнопка, карточка товара, форма входа
Реактивное состояние Данные, изменение которых Vue отслеживает и перерисовывает зависимые места ref(0), reactive({})
Шаблон HTML-разметка с привязками к данным {{ count }}, @click="inc"
Директива Специальный атрибут шаблона с префиксом v- v-if, v-show, v-for, v-model
SFC Однофайловый компонент .vue: шаблон, скрипт и стили в одном файле Counter.vue

Для чего нужен Vue

Критерий выбора простой: Vue нужен, когда на странице много состояния, которое влияет на разметку, и обновлять DOM вручную становится трудно. Типичные задачи:

  • интерактивные блоки на обычном сайте: фильтры каталога, калькуляторы, формы с проверкой;
  • SPA: личные кабинеты, админ-панели, внутренние сервисы компаний;
  • сайты с серверным рендерингом и SEO-требованиями — через Nuxt;
  • дашборды и интерфейсы с частыми обновлениями данных.

Если страница почти статична и интерактивности мало, фреймворк может быть лишним: хватит нативного JavaScript. Это не недостаток Vue, а вопрос соответствия инструмента задаче.

Как работает Vue: первый полный пример

Ниже компонент-счетчик. Кнопка увеличивает число, а два абзаца показывают, четное ли оно. Пример запускается в Node.js: библиотека jsdom заменяет браузер, поэтому видно, какой HTML Vue строит на каждом шаге.

// counter.mjs; установка: npm i vue jsdom; запуск: node counter.mjs
import { JSDOM } from 'jsdom';
const dom = new JSDOM('<!doctype html><div id="app"></div>');
globalThis.window = dom.window;
globalThis.document = dom.window.document;
globalThis.SVGElement = dom.window.SVGElement;
globalThis.Element = dom.window.Element;

const { createApp, ref, computed, nextTick } = await import('vue');

const app = createApp({
  setup() {
    const count = ref(0);                        // реактивное состояние
    const isEven = computed(() => count.value % 2 === 0);
    const inc = () => count.value++;
    return { count, isEven, inc };
  },
  template: `
    <button @click="inc">Нажато: {{ count }}</button>
    <p v-if="isEven">четное (v-if)</p>
    <p v-show="isEven">четное (v-show)</p>
  `,
});
app.mount('#app');

const root = document.querySelector('#app');
console.log('1)', root.innerHTML.trim());
root.querySelector('button').click();            // count = 1
await nextTick();                                // ждем обновления DOM
console.log('2)', root.innerHTML.trim());

Результат прогона:

1) <button>Нажато: 0</button><p>четное (v-if)</p><p>четное (v-show)</p>
2) <button>Нажато: 1</button><!--v-if--><p style="display: none;">четное (v-show)</p>

Что здесь происходит по шагам:

  1. ref(0) создает реактивное значение; читать и менять его в JavaScript нужно через .value, а в шаблоне Vue разворачивает его сам.
  2. computed — вычисляемое значение: пересчитывается, только когда меняется count.
  3. @click="inc" — сокращение директивы v-on:click, обработчик события.
  4. После клика Vue не перерисовывает всю страницу, а обновляет только затронутые узлы. Обновление DOM асинхронное: изменения собираются в пачку, поэтому перед чтением DOM стоит await nextTick().

v-if и v-show: в чем разница

Прогон показывает разницу наглядно. При нечетном числе абзац с v-if исчез из DOM (на его месте служебный комментарий), а абзац с v-show остался, но получил display: none.

Директива Что делает при false Когда выбирать
v-if Удаляет элемент из DOM, при true создает заново Условие меняется редко, блок тяжелый
v-show Оставляет элемент, скрывает через CSS Блок часто показывают и прячут

Частая ошибка: потеря реактивности

Реактивный объект reactive() отслеживает обращения к своим свойствам. Если разложить его деструктуризацией, в переменную попадет обычное число без связи с объектом.

// pitfall.mjs; запуск: node pitfall.mjs
import { reactive, toRefs, watch, nextTick } from 'vue';

const state = reactive({ count: 0 });
watch(() => state.count, (v) => console.log('watch: count =', v));

// Ошибка: деструктуризация копирует число, связь с state теряется
let { count } = state;
count++;
await nextTick();
console.log('после count++  ->', state.count);

// Исправление: toRefs превращает поля в ref, связанные с исходным объектом
const refs = toRefs(state);
refs.count.value++;
await nextTick();
console.log('после ref.value++ ->', state.count);
после count++  -> 0
watch: count = 1
после ref.value++ -> 1

В первом случае state.count остался 0 и наблюдатель watch не сработал: интерфейс бы не обновился. Во втором изменение дошло до исходного объекта. Проще всего этой ловушки избегать, если хранить примитивы в ref и не деструктурировать reactive без toRefs.

Vue 3: Composition API и Options API

Во Vue 3 есть два стиля написания компонентов. Оба официально поддерживаются и работают на одном ядре реактивности.

Options API Composition API
Как устроен код Объект с разделами data, methods, computed Функции ref, computed, watch внутри setup или <script setup>
Как переиспользовать логику Миксины (конфликты имен, неявные связи) Функции-композаблы (useFetch, useForm)
TypeScript Работает, но типизация сложнее Типы выводятся естественно
Кому удобнее Новичкам и небольшим компонентам, поддержке старого кода Средним и крупным проектам

Так выглядит тот же счетчик в однофайловом компоненте с <script setup> — рекомендованным форматом для новых проектов на сборщике:

<!-- Counter.vue -->
<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const isEven = computed(() => count.value % 2 === 0)
</script>

<template>
  <button @click="count++">Нажато: {{ count }}</button>
  <p v-if="isEven">четное</p>
</template>

<style scoped>
button { font-size: 18px; }
</style>

<style scoped> ограничивает стили этим компонентом: правило для button не заденет кнопки в других частях приложения.

Как начать проект на Vue

Дорожная карта до первого артефакта — работающего приложения со списком задач:

  1. Установить Node.js актуальной LTS-ветки (на сентябрь 2026 — 24.x). Текущий create-vue 3.24 требует Node.js 22.18+ или 24.12+, на более старой версии генератор не запустится.
  2. Создать проект официальным генератором: npm create vue@latest, ответить на вопросы (Router, Pinia, TypeScript — по желанию).
  3. Перейти в папку проекта, выполнить npm install и npm run dev — откроется локальный сервер Vite.
  4. Заменить App.vue на свой компонент: поле ввода с v-model, кнопку «Добавить» и список через v-for с :key.
  5. Вынести элемент списка в отдельный компонент и передать данные через props, а событие удаления — через emit.
  6. Собрать продакшен-версию: npm run build, результат появится в папке dist.

Если не получилось:

  • npm: command not found — Node.js не установлен или терминал открыт до установки; перезапустить терминал, проверить node -v.
  • Страница пустая, в консоли браузера предупреждение [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue — шаблон передан строкой в template, а подключена сборка без компилятора; в проекте на Vite используйте .vue-файлы.
  • Данные меняются, а экран нет — потеряна реактивность (см. пример выше) или изменена обычная переменная вместо ref.
  • Предупреждение про key в v-for — у элементов списка нет уникального :key; ключ нужен, чтобы Vue правильно сопоставлял элементы при обновлении.

Экосистема Vue в 2026 году

Задача Актуальный инструмент Что устарело
Создание и сборка проекта create-vue + Vite Vue CLI (в режиме поддержки)
Маршрутизация SPA Vue Router 5 (с января 2026; для кода на Vue Router 4 без файловой маршрутизации обновление без правок) —
Глобальное состояние Pinia Vuex (новых возможностей не получает)
Серверный рендеринг, SSG Nuxt самописный SSR для типовых сайтов
Отладка Vue DevTools —
Форматирование в шаблоне методы и computed фильтры с вертикальной чертой внутри {{ }} (удалены во Vue 3)

Плюсы и минусы Vue

Плюсы Минусы
Низкий порог входа: шаблоны похожи на обычный HTML Экосистема и рынок вакансий меньше, чем у React (зависит от региона)
Подробная официальная документация, есть русский перевод Часть статей и ответов в интернете написана для Vue 2 и не подходит к Vue 3
Можно внедрять постепенно, начиная с одного блока Два стиля API: в одной команде нужно договориться о едином
Точечные обновления DOM за счет реактивности Реактивность имеет правила (.value, деструктуризация), которые нужно выучить
Официальные Router, Pinia, DevTools от одной команды Миграция старых проектов с Vue 2 на Vue 3 требует переписывания части кода

Тезис «Vue подходит только для небольших проектов», который встречается в старых обзорах, устарел: на Vue 3 с TypeScript, Pinia и Nuxt делают и крупные приложения. Ограничение скорее организационное — наличие специалистов на рынке и договоренности в команде.

Выводы

  • Vue.js — JavaScript-фреймворк для интерфейсов: разработчик описывает зависимость разметки от данных, Vue обновляет DOM сам.
  • Основу составляют компоненты, реактивное состояние (ref, reactive, computed) и шаблоны с директивами.
  • v-if удаляет элемент из DOM, v-show скрывает через CSS; это видно в прогоне примера.
  • Для новых проектов — Vue 3, <script setup>, create-vue + Vite, Pinia вместо Vuex; Vue 2 не поддерживается с 2024 года.
  • Главные минусы — меньший рынок, чем у React, и правила реактивности, которые новичку нужно освоить.

Где применяется / связь с практикой

Vue используют в личных кабинетах, админ-панелях, интернет-магазинах и внутренних сервисах, где интерфейс постоянно реагирует на данные. Дальше после основ идут маршрутизация, работа с API, тестирование компонентов, типизация и серверный рендеринг на Nuxt.

Освойте тему на практике

Системно пройти этот путь с проектами и ревью кода можно на курсе «Vue.js разработчик». Чтобы познакомиться с форматом и преподавателями, можно начать с бесплатных открытых уроков.

FAQ

Vue — это фреймворк или библиотека?
Ядро Vue само по себе близко к библиотеке для слоя представления, но вместе с официальными Router, Pinia и инструментами сборки образует полноценный фреймворк. Поэтому его и называют прогрессивным.

Нужно ли знать JavaScript перед Vue?
Да: без уверенного владения функциями, объектами, модулями и промисами код на Vue будет непонятен. HTML и CSS тоже нужны, TypeScript желателен, но его можно добавить позже.

Можно ли подключить Vue к готовому сайту без сборщика?
Можно: у Vue есть сборка для подключения через тег script, и приложение монтируется в один элемент страницы. Для проекта, который будет расти, удобнее перейти на Vite и .vue-файлы.

Vue.js программирование
OTUS Журнал
© 2026 OTUS Журнал