Реактивність і декларативність

#1. Що означає "декларативний"

• Імперативний підхід: ти сам кажеш браузеру, як потрібно оновити інтерфейс. Приклад (чистий JS):

  javascript

  Copy

  const countEl = document.querySelector('#count') let count = 0 function increment() { count++ countEl.textContent = count // вручну оновлюємо DOM }

• Декларативний підхід: ти описуєш, що має бути, а фреймворк сам вирішує як і коли оновити інтерфейс. Приклад (Vue):

  javascript

  Copy

  <template> <button @click="count++">{{ count }}</button> </template> <script setup> import { ref } from 'vue' const count = ref(0) </script>

Ти просто оголошуєш залежність між count і шаблоном - Vue сам стежить, щоб UI завжди відповідав даним.

---

#2. Як реактивність робить це можливим

Уся справа в автоматичному відстеженні залежностей.

Коли Vue рендерить шаблон:

• Він "читає" значення реактивних змінних (ref, reactive).
• Автоматично запам'ятовує, які ділянки інтерфейсу залежать від яких даних.
• При зміні цих даних - Vue сам оновлює лише потрібні частини DOM.

Тобі не потрібно вручну викликати render(), setTextContent() або appendChild(). Це і є декларативність: ти описуєш стан, а не керуєш кроками оновлення.

---

#3. Ключова ідея

Реактивність -> автоматичне оновлення інтерфейсу -> декларативність

Без реактивності Vue довелося б бути імперативним фреймворком - тобі довелося б писати код на кшталт:

А реактивна система робить це автоматично, невидимо для розробника.

---

#4. Проста аналогія

Уяви, що ти описуєш формулу в Excel:

Коли A1 або B1 змінюються - результат перераховується автоматично. Ти не пишеш "якщо змінилося A1 -> перерахувати C1" вручну. Це і є реактивність - і саме тому Excel, як і Vue, декларативний.

---

#5. Підсумок