Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що означає реактивність стану?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Реактивність стану** означає, що Vue автоматично відстежує зміни даних і **перемальовує інтерфейс**, коли ці дані змінюються.

**Якщо якесь значення змінилося - Vue сам оновить усе, що від нього залежить.**
Тобі не потрібно вручну оновлювати DOM.

---

## Простий приклад реактивності

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

const count = ref(0)
</script>

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

Коли ти натискаєш кнопку і `count++` збільшує число - Vue:

1. помічає зміну
2. обчислює, які частини шаблону залежать від `count`
3. перемальовує лише цю частину

Усі інші елементи залишаються незмінними - це швидко й ефективно.

---

## Що відбувається всередині?

Реактивність у Vue працює так:

1. Ти створюєш змінну через `ref()` або `reactive()` (або в `data()`).
2. Vue робить її "спостережуваною" - відстежує читання/запис.
3. Коли значення змінюється - Vue запускає механізм оновлення.
4. Компонент перемальовується лише там, де використовувалося це значення.

Vue вибудовує зв'язки між:

- станом,
- шаблоном,
- обчислюваними властивостями,
- ефектами (watch, watchEffect).

Ці зв'язки створюються автоматично.

---

## Приклад: реактивність об'єкта

```javascript
<script setup>
import { reactive } from 'vue'

const user = reactive({
  name: 'Tim',
  age: 25
})
</script>

<template>
  <p>{{ user.name }} ({{ user.age }})</p>
  <button @click="user.age++">Старший</button>
</template>
```

При збільшенні віку Vue оновить лише текст `25` -> `26`.

---

## Що робить реактивність зручною?

#### Не потрібно вручну змінювати DOM

JS змінює дані -> Vue сам змінює HTML.

#### Шаблон завжди відображає поточний стан

UI ніколи не "розходиться" з даними.

#### Перемальовування лише там, де потрібно

Vue перерендерить лише зачеплені ділянки - це швидко.

#### Зручно будувати складні залежності

Наприклад, `computed` перераховується лише при зміні залежних даних.

---

## Підсумок (коротко)

**Реактивність - це здатність Vue автоматично оновлювати користувацький інтерфейс при зміні стану.**

- змінив `ref` / `reactive` / `data()` -> оновився UI
- оновлюються лише потрібні ділянки
- реактивність дає простоту, передбачуваність і високу продуктивність

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати308 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.