Урок 2 · Vue · 20 минут

Реактивность Vue: интерфейс обновляется сам

Реактивная переменная связана с шаблоном. Когда её значение меняется, Vue обновляет только нужные элементы страницы.

ref для значения

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

<button @click="count++">{{ count }}</button>

В JavaScript-коде значение ref читают и меняют через count.value. В шаблоне Vue делает это автоматически.

computed для вычислений

import { computed, ref } from 'vue';
const price = ref(1000);
const tax = computed(() => price.value * 0.2);

computed подходит для производных данных: итоговой цены, отфильтрованного списка, подписи состояния. Он не должен менять другие данные.

Ошибки

• Забыть .value в script.
• Хранить вычисляемое значение в ref и обновлять его вручную.
• Менять данные прямо во время вычисления computed.

Ref и reactive выбирают по форме данных

ref подходит для числа, строки и для значения, которое целиком заменяют. В скрипте у него читают и пишут .value, в шаблоне приставка снимается. reactive удобен для объекта с несколькими полями: свойства меняются по месту и отслеживаются.

Не разбирай reactive объект в кучу отдельных переменных. Связь с исходным объектом потеряется, и страница перестанет обновляться. Если нужны отдельные имена, бери их через toRefs.

import { computed, reactive, ref } from "vue";

const query = ref("");
const catalog = reactive([
  { id: 1, title: "Формы" },
  { id: 2, title: "Таблицы" }
]);

const found = computed(() =>
  catalog.filter((item) => item.title.includes(query.value))
);

Вычисляемое значение не хранят второй раз

computed заново считает результат, когда меняются использованные данные, и кэширует его, пока они спокойны. Отфильтрованный список, полная цена и подпись кнопки — хорошие кандидаты. Запрос на сервер в computed устраивать нельзя: вычисление должно быть чистым и быстрым.

Если менять поле внутри computed, получится петля и странные предупреждения. Вычисление только читает. Запись живёт в обработчике.

Почему интерфейс молчит

• Забыли .value у ref в скрипте и заменили сам контейнер.
• Положили обычный объект в переменную и ждут от него реактивности.
• Меняют копию массива после slice, а на экране исходный.
• Смотрят старое значение в консоли объектом: раскрой его сразу или логируй поле.

const title = ref('Книга');
const rename = () => { title.value = 'Новая книга'; };