реактивність VS зв'язування даних
1. Що таке просте зв'язування даних (data binding)
Зв'язування даних - це механізм, при якому дані з моделі автоматично відображаються в інтерфейсі (і іноді навпаки).
Приклад класичного «двостороннього зв'язування» (наприклад, в AngularJS):
<input ng-model="message">
<p>{{ message }}</p>Коли користувач вводить текст, фреймворк оновлює message,
і <p> теж змінюється.
Але під капотом це працює через прослуховування подій і ручні перевірки (dirty checking, digest cycle тощо).
То є - це просто механізм синхронізації між даними та DOM, але не повноцінна реактивна система.
2. Що таке реактивність
Реактивність - це глибше поняття: це система, яка відстежує залежності між даними та обчисленнями на рівні коду, а не тільки на рівні DOM.
Vue знає не просто «ці дані пов'язані з цим шаблоном», а ще й які обчислення, які computed, які watchers залежать від конкретних властивостей.
Приклад (Vue 3):
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. Приклад для порівняння
Просте зв'язування
input.oninput = () => {
p.textContent = input.value
}-> просто копіює значення з поля в елемент.
Реактивність (Vue)
const state = reactive({ message: 'Hi' })
effect(() => {
p.textContent = state.message
})-> Vue сам відстежує залежність,
і при зміні state.message викличе оновлення автоматично,
не знаючи, де і як це використовується.
5. Узагальнюючи
Просте зв'язування даних - це «онови HTML, коли змінилися дані».
Реактивність - це «онови все, що залежить від цих даних - логіку, обчислення, шаблон, компоненти».
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.