Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як Vue оновлює DOM при зміні даних?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Реактивна система** та **Virtual DOM** дозволяють Vue автоматично й ефективно оновлювати інтерфейс користувача, коли змінюються дані. **Ключове:** Vue порівнює нове віртуальне дерево зі старим і вносить у реальний DOM лише мінімально необхідні зміни.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення### Як Vue оновлює DOM при зміні даних Vue використовує **реактивну систему** та **Virtual DOM**, щоб автоматично та ефективно оновлювати інтерфейс користувача, коли змінюються дані. --- ## 1. Реактивність даних Коли ви створюєте стан (наприклад, у `data()` або за допомогою `ref()/reactive()` у Composition API), Vue **обгортає об'єкт у Proxy**. Цей Proxy перехоплює операції читання та запису властивостей. ```javascript const state = reactive({ count: 0 }) ``` Якщо потім зробити: ```javascript state.count++ ``` Vue "побачить" зміну і запланує оновлення всіх компонентів, які залежать від `state.count`. --- ## 2. Відстеження залежностей Vue відстежує, **які дані використовуються під час рендеру компонента**. Коли компонент вперше відмальовується, Vue реєструє всі реактивні властивості, які були прочитані всередині шаблону або функції `render()`. Приклад: ```javascript <template> <p>Лічильник: {{ count }}</p> </template> <script setup> import { ref } from 'vue' const count = ref(0) </script> ``` Коли Vue рендерить шаблон, він "запам'ятовує", що компонент залежить від `count`. Тепер при зміні `count.value` Vue **перемалює тільки цей компонент**. --- ## 3. Virtual DOM Vue не змінює DOM напряму. Натомість: 1. Генерує **віртуальне дерево елементів (Virtual DOM)** - легке JS-представлення поточного інтерфейсу. 2. Коли дані змінюються, Vue створює **нове віртуальне дерево**. 3. Потім Vue **порівнює (diff)** нове дерево зі старим. 4. І тільки **мінімально необхідними змінами** оновлює реальний DOM. Це робить оновлення **дуже швидкими та оптимальними**. --- ## 4. Батчинг (групування оновлень) Vue не оновлює DOM миттєво при кожній зміні даних. Зміни збираються і виконуються **асинхронно** у наступному "tick" (ітерації event loop), щоб уникнути зайвих перемальовувань. ```javascript count.value++ count.value++ console.log('DOM ще не оновлено') await nextTick() console.log('DOM вже оновлено') ``` --- ## 5. Мінімальні оновлення DOM Завдяки Virtual DOM і трекінгу залежностей Vue: - Не перемальовує весь компонент; - Не торкається інших незалежних частин сторінки; - Змінює **тільки те**, що справді змінилося. --- ### Підсумок > Vue оновлює DOM **реактивно та ефективно**: > > - Відстежує, які дані де використовуються; > - При зміні даних перераховує тільки потрібні компоненти; > - Використовує Virtual DOM для мінімальних змін у реальному DOM; > - Робить оновлення асинхронними для оптимальної продуктивності.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.