Первое приложение и интерполяция

Пишем первое работающее приложение: реактивные данные через ref, их вывод в шаблоне и проверка идеи «данные → интерфейс» прямо в браузере.

Реактивная переменная — значение, за изменениями которого следит Vue: как только оно меняется, все места в шаблоне, где оно используется, обновляются автоматически.

Минимальный компонент

Соберём приветствие, которое показывает имя и реагирует на кнопку. Логика в <script setup>, разметка в <template>:

<template>
  <h1>Привет, {{ name }}!</h1>
  <p>Кликов: {{ count }}</p>
  <button @click="count++">Нажми меня</button>
</template>

<script setup>
import { ref } from 'vue'

const name = ref('Аня')
const count = ref(0)
</script>

Функция ref делает значение реактивным. В шаблоне мы пишем просто {{ count }} — без .value, Vue разворачивает ref за нас. Каждый клик увеличивает count, и строка «Кликов» обновляется сама.

Как данные становятся интерфейсом

Идея «интерфейс — это функция от данных» проверяется и в обычном JavaScript. Представим «рендер» как функцию, которая по состоянию строит строку экрана. Меняем состояние — вызываем рендер заново и получаем новый вид:

const state = { name: "Аня", count: 0 };

function render(s) {
  return `Привет, ${s.name}! Кликов: ${s.count}`;
}

console.log(render(state));
state.count += 1;
console.log(render(state));
state.name = "Борис";
console.log(render(state));

Вывод:

Привет, Аня! Кликов: 0
Привет, Аня! Кликов: 1
Привет, Борис! Кликов: 1

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

Выражения в шаблоне

В интерполяцию можно поставить не только переменную, но и любое выражение:

<template>
  <p>{{ name }}</p>
  <p>{{ count * 2 }}</p>
  <p>{{ count > 0 ? 'Есть клики' : 'Пока ноль' }}</p>
</template>

Тернарный оператор, арифметика, вызовы методов — всё это работает. Но логику посложнее лучше выносить в вычисляемые свойства (о них в разделе про реактивность), чтобы шаблон оставался читаемым.

Частая ошибка новичка

В <script> к значению ref нужно обращаться через .value (например count.value++), а в <template> — без него ({{ count }}). Если в скрипте написать count++ вместо count.value++, реактивность не сработает. Подробно ref разберём в третьем разделе — пока просто запомните это различие.

Итог

• ref(значение) создаёт реактивную переменную, за которой следит Vue.
• В шаблоне ref пишется без .value — Vue разворачивает его автоматически.
• Интерфейс во Vue — функция от данных: меняются данные, экран перерисовывается сам.
• В скрипте к ref обращаются через .value, в шаблоне — без него.