Skip to main content

Що таке "реактивне дерево" (reactivity tree)?

VueJunior~2 хв читання
Запропонувати правку

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

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

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

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

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

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

javascript
<template> <p>Double: {{ double }}</p> </template> <script setup> import { ref, computed } from 'vue' 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 автоматично й ефективно розуміти, що потрібно перерахувати й оновити, коли змінюються реактивні дані.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

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