Theory

Первое приложение

Что такое Vue

Vue — фреймворк для интерфейсов, как React, но с другим подходом: разметку пишут в привычном HTML-подобном шаблоне, а Vue сам следит, какие данные в нём используются, и обновляет страницу, когда они меняются. Это называется реактивностью. Vue любят за низкий порог входа и понятную документацию; на нём сделаны GitLab, Alibaba, Xiaomi, тысячи админок и интернет-магазинов.

Приложение и компонент

Компонент во Vue — обычный объект с настройками. Минимум — функция setup с данными и template с разметкой:

const { createApp, ref } = Vue;     // в проекте: import { createApp, ref } from "vue";

const App = {
  setup() {
    const message = ref("Привет, Vue!");
    return { message };
  },
  template: `<h1>{{ message }}</h1>`,
};

createApp(App).mount("#app");

createApp(App) создаёт приложение из корневого компонента;
.mount("#app") показывает его внутри элемента #app;
setup() вызывается один раз при создании компонента; всё, что он вернул, доступно в шаблоне.

На нашем сайте Vue подключён как глобальный объект Vue. В реальном проекте компоненты обычно пишут в файлах .vue, где шаблон, код и стили лежат рядом, но суть та же.

Интерполяция {{ }}

Двойные фигурные скобки выводят значение выражения как текст:

<p>{{ message }}</p>
<p>{{ count * 2 }}</p>
<p>{{ name.toUpperCase() }}</p>
<p>{{ isAdmin ? "Админ" : "Гость" }}</p>

Как и в JSX, внутри — выражение, не инструкция. HTML-теги в значении не превращаются в элементы, а показываются как текст — это защита от XSS.

ref — реактивное значение

ref(начальное) создаёт «коробку» со значением. Vue запоминает, где коробка используется, и при изменении обновляет эти места:

const count = ref(0);
console.log(count.value);   // 0
count.value++;              // страница обновится сама

Главная деталь: в JavaScript значение лежит в .value, а в шаблоне .value писать не нужно — Vue «распаковывает» ref сам: {{ count }}.

Функции в setup

Функции, которые меняют данные, объявляют в setup и тоже возвращают:

const App = {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return { count, increment };
  },
  template: `<button @click="increment">Нажато {{ count }}</button>`,
};

@click — подписка на событие, подробно — через тему. Обрати внимание: мы не трогаем DOM вручную, не ищем кнопку и не меняем её текст. Изменили данные — Vue перерисовал.

reactive — реактивный объект

Когда данных много и они связаны, удобнее reactive — реактивный объект целиком:

const { reactive } = Vue;

const state = reactive({
  user: "Аня",
  items: [],
  total: 0,
});

state.total += 100;          // без .value
state.items.push("книга");   // изменения массива тоже отслеживаются

В отличие от React, во Vue данные можно менять напрямую — push, присваивание полю. Vue перехватывает эти изменения и обновляет страницу.

Что выбрать? ref подходит для всего (числа, строки, объекты), reactive — только для объектов и массивов. Многие команды пишут всё через ref, чтобы не путаться.

Обновления — пачкой

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

count.value++;
await Vue.nextTick();        // теперь DOM уже обновлён

Так ждут обновления проверки в задачах этого курса.

Итог

Компонент — объект с setup() и template; createApp(App).mount("#app") — запуск.
Что вернул setup — доступно в шаблоне; {{ выражение }} — вывод текста.
ref: в JS — .value, в шаблоне — без .value; reactive — объект без .value.
Меняешь данные — Vue сам обновляет страницу (после nextTick).