Что такое Vue и его философия

Знакомимся с Vue: какую задачу он решает, что значит «прогрессивный фреймворк» и почему декларативность экономит вам нервы и баги.

Vue — это фреймворк для построения пользовательских интерфейсов, в котором вы описываете каким должен быть UI при текущем состоянии данных, а синхронизацией с реальным DOM занимается сам Vue.

Боль ручного DOM

Вспомните, как обновляется страница на чистом JavaScript: вы находите элемент через document.querySelector и вручную меняете его textContent или innerHTML. Состояние (данные) и отображение (DOM) живут отдельно, и связывать их приходится руками.

let count = 0;
const screen = { text: "" };          // имитация элемента на странице
function render() {
  screen.text = "Счёт: " + count;     // вручную синхронизируем «DOM»
}
function increment() {
  count = count + 1;
  render();                            // не забыть вызвать!
}
increment();
increment();
console.log(screen.text);

Вывод:

Счёт: 2

Если забыть вызвать render() — на экране окажутся устаревшие данные. Чем больше полей, тем больше таких ручных синхронизаций и тем выше шанс ошибиться. Это классический источник багов в «ванильных» приложениях.

Декларативный подход Vue

Vue переворачивает задачу. Вы не пишете «найди элемент и поменяй текст». Вы один раз описываете связь: «здесь показывается значение count». Когда count меняется — Vue сам обновляет нужное место на экране. Это и есть реактивность: данные и интерфейс связаны автоматически.

<template>
  <button @click="count++">Счёт: {{ count }}</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

Здесь нет querySelector и textContent. Есть только описание: «кнопка показывает count, по клику увеличивает его». Vue гарантирует, что число на экране всегда соответствует значению count. Вы декларируете результат, а не пошаговый рецепт его достижения.

Почему «прогрессивный фреймворк»

Vue называют прогрессивным, потому что его можно внедрять постепенно. Можно подключить одним <script>-тегом и «оживить» один блок на старой странице. А можно собрать полноценное одностраничное приложение (SPA) с маршрутизацией, хранилищем состояния и сборкой через Vite. Вы берёте ровно столько фреймворка, сколько нужно проекту.

Три идеи, на которых стоит Vue

Идея	Что она даёт
Декларативность	Вы описываете желаемый вид интерфейса, а не шаги по его изменению
Реактивность	Меняются данные — интерфейс сам перерисовывается, без ручного DOM
Компоненты	UI собирается из переиспользуемых кирпичиков со своим шаблоном, логикой и стилями

Императивно против декларативно

Аналогия: императивный код — это маршрут «иди прямо, поверни налево, через 200 метров направо». Декларативный — это адрес «улица Ленина, 5». Если перекрыли улицу, маршрут ломается и его надо переписывать вручную. А по адресу навигатор сам построит путь заново. Vue — навигатор для вашего интерфейса.

Итог

Ручной DOM требует вручную синхронизировать данные и экран — отсюда баги.
Vue декларативен: вы описываете UI как функцию от данных, синхронизацию берёт на себя фреймворк.
«Прогрессивный» — внедряется постепенно: от одного блока до полноценного SPA.
Три кита: декларативность, реактивность, компоненты.