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

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

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

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

Контент

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

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

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

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

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

## 1. Що таке просте зв'язування даних (data binding)

**Зв'язування даних** - це механізм, при якому дані з моделі автоматично відображаються в інтерфейсі (і іноді навпаки).

Приклад класичного «двостороннього зв'язування» (наприклад, в AngularJS):

```javascript
<input ng-model="message">
<p>{{ message }}</p>
```

Коли користувач вводить текст, фреймворк оновлює `message`,
і `<p>` теж змінюється.
Але під капотом це працює **через прослуховування подій і ручні перевірки** (dirty checking, digest cycle тощо).

То є - це просто механізм синхронізації між **даними та DOM**,
але не повноцінна реактивна система.

---

## 2. Що таке реактивність

**Реактивність** - це *глибше поняття*:
це система, яка *відстежує залежності між даними та обчисленнями* на рівні коду, а не тільки на рівні DOM.

Vue знає не просто «ці дані пов'язані з цим шаблоном»,
а ще й **які обчислення, які computed, які watchers** залежать від конкретних властивостей.

Приклад (Vue 3):

```javascript
import { ref, computed } from 'vue'

const count = ref(1)
const double = computed(() => count.value * 2)
```

Якщо `count` зміниться, Vue **автоматично перерахує** `double`,
навіть якщо це значення ніде не відображається в шаблоні.

Це означає, що реактивність працює **на рівні логіки даних**,
а не просто на рівні «зв'язки поля з текстом».

---

## 3. Ключова відмінність

| Критерій | Просте зв'язування даних | Реактивність Vue |
|---|---|---|
| **Що оновлюється** | Тільки DOM | Будь-які обчислення, компоненти та ефекти |
| **Як працює** | Через стеження за полями форми та подієві оновлення | Через Proxy, відстеження залежностей і реактивні ефекти |
| **Підтримка обчислюваних значень (computed)** | Немає (потрібно вручну перераховувати) | Так, автоматично |
| **Контроль за залежностями** | Немає (все оновлюється при будь-якій зміні) | Точна підписка на конкретні властивості |
| **Рівень роботи** | Поверхневий (DOM <-> дані) | Глибокий (дані <-> обчислення <-> DOM) |
| **Продуктивність** | Менш ефективний (часто все перерендерює) | Оптимізований, тільки потрібні залежності |

---

## 4. Приклад для порівняння

### Просте зв'язування

```javascript
input.oninput = () => {
  p.textContent = input.value
}
```

-> просто копіює значення з поля в елемент.

### Реактивність (Vue)

```javascript
const state = reactive({ message: 'Hi' })

effect(() => {
  p.textContent = state.message
})
```

-> Vue сам *відстежує залежність*,
і при зміні `state.message` викличе оновлення автоматично,
не знаючи, де і як це використовується.

---

## 5. Узагальнюючи

> Просте зв'язування даних - це «онови HTML, коли змінилися дані».
>
> Реактивність - це «онови **все, що залежить** від цих даних - логіку, обчислення, шаблон, компоненти».

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

Для рев’юера

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

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