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

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

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

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

Контент

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

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

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

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

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

## 1. Що таке реактивне дерево

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

Можна уявити це як дерево, де:

- **Корені** - реактивні дані (`ref`, `reactive`),
- **Гілки** - обчислювані значення (`computed`, `watchEffect`, `render effect`),
- **Листя** - конкретні DOM-вузли або компоненти, які оновлюються.

---

## 2. Приклад на інтуїтивному рівні

Візьмемо простий приклад:

```javascript
<template>
  <p>Double: {{ double }}</p>
</template>

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

Тут Vue будує приблизно таку структуру залежностей:

```javascript
count (ref)
 └── double (computed)
      └── render effect (компонент)
```

Коли `count` змінюється:

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

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

---

## 3. Як це влаштовано всередині

Vue зберігає залежності за допомогою структур:

```javascript
targetMap = WeakMap {
  target (об'єкт) → Map {
    key (властивість) → Set(effect)
  }
}
```

- Кожен `ref` або властивість реактивного об'єкта (`reactive`) - це **вузол даних**.
- Кожен `effect` (наприклад, функція рендеру, `computed`, `watchEffect`) - це **вузол ефекту**.
- Vue будує "граф" або "дерево" зв'язків: хто від кого залежить.

Коли Vue викликає `track(target, key)` під час читання властивості,
він додає зв'язок між **вузлом даних** і **вузлом ефекту**.
При зміні - викликається `trigger(target, key)`, і Vue оновлює лише пов'язані ефекти.

---

## 4. Чому це називається "деревом"

Хоча формально це **граф залежностей**, на практиці він поводиться **як дерево оновлень**, тому що залежності йдуть **в одному напрямку**:

```javascript
reactive data → computed → watchers → render → DOM
```

**Верхні рівні (корені)** - дані.
**Середні** - обчислювані значення й ефекти.
**Нижні** - компоненти й DOM.

Таким чином, при зміні однієї властивості Vue "спускається по дереву", оновлюючи лише потрібні гілки.

---

## 5. Чому це важливо

Реактивне дерево дає Vue потужні переваги:

| Перевага | Пояснення |
|---|---|
| **Точна гранулярність** | Оновлюється лише те, що реально залежить від зміненої властивості |
| **Висока продуктивність** | Немає "брудних перевірок" (на відміну від AngularJS) |
| **Проста композиція** | Будь-які `computed` і `watch` будуються поверх тих самих залежностей |
| **Оптимальний ререндер** | Vue знає, які компоненти потрібно оновити, а які можна пропустити |

---

## 6. Візуальна аналогія

```javascript
        [Reactive data]
           /       \
   [Computed A]   [Computed B]
        |              \
   [Watcher]        [Render effect]
                          |
                        [DOM]
```

Зміна даних у корені дерева викликає "ланцюгову реакцію"
по всіх вузлах, що залежать від них, але **лише по потрібній гілці**.

---

## 7. Коротко

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

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

Для рев’юера

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

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