Як Vue оновлює DOM при зміні даних?

VueJunior~1 хв читання

Як 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.

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 напряму. Натомість:

Генерує віртуальне дерево елементів (Virtual DOM) - легке JS-представлення поточного інтерфейсу.
Коли дані змінюються, Vue створює нове віртуальне дерево.
Потім Vue порівнює (diff) нове дерево зі старим.
І тільки мінімально необхідними змінами оновлює реальний 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;

Робить оновлення асинхронними для оптимальної продуктивності.

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

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

Premium

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

Як Vue оновлює DOM при зміні даних?