Как устроено реактивное состояние

От обычной переменной к интерфейсу, который обновляется вместе с данными.

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

Начните с ref

Функция ref оборачивает значение в реактивный объект. В JavaScript читать и менять его нужно через .value. В шаблоне верхнеуровневый ref обычно разворачивается автоматически, поэтому там можно писать просто count.

<script setup>
import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
</script>

<template>
  <button @click="count++">{{ count }}</button>
  <p>Удвоенное значение: {{ doubled }}</p>
</template>

Вычисления и побочные эффекты

computed подходит для значения, которое можно получить из других данных: например, для отфильтрованного списка. Не делайте сетевые запросы внутри вычисляемого свойства. Для побочных эффектов есть обработчики событий и watch.

Проверьте понимание

Добавьте кнопку сброса и вычисляемую подпись «чётное» или «нечётное». Храните только счётчик, а подпись вычисляйте из него. Это уменьшает риск рассинхронизации двух переменных.