Що таке Virtual DOM?

Virtual DOM (віртуальний DOM) - це легковаге JavaScript-представлення реального DOM. Vue (як і React) використовує Virtual DOM, щоб ефективно оновлювати інтерфейс, мінімізуючи кількість операцій у реальному DOM.

Простіше кажучи:

Virtual DOM - це копія DOM у пам'яті, яка дозволяє фреймворку обчислити, що потрібно оновити, а чого торкатися не потрібно.

---

#Навіщо потрібен Virtual DOM?

Реальний DOM - дуже повільний для частих змін. Кожна операція:

• викликає перемальовування
• перерахунок стилів
• перерахунок розмірів
• перемальовування layout

Virtual DOM вирішує це так:

1. Vue генерує віртуальне дерево (JS-об'єкти)
2. При зміні даних Vue створює нове віртуальне дерево
3. Vue порівнює старе і нове (diffing)
4. Застосовує мінімально необхідні зміни до реального DOM

---

#Як це виглядає?

#Був стан -> віртуальне дерево A

Дані змінилися -> віртуальне дерево B

Vue:

1. порівняв A і B
2. знайшов відмінності
3. оновив DOM лише там, де потрібно

---

#Маленький приклад (спрощено)

#Старе віртуальне дерево

#Нове віртуальне дерево

Vue розуміє - змінилася лише текстова нода -> оновлює лише текст.

Без Virtual DOM довелося б перемальовувати весь <p>.

---

#Основні переваги Virtual DOM

#1. Мінімум операцій з реальним DOM

Саме це робить інтерфейс швидким.

#2. Оптимізація оновлень через diff-алгоритм

Vue оновлює лише частини, що змінилися.

#3. Простіше думати про UI як про функцію даних

UI = f(state), а Vue сам оновлює DOM, як потрібно.

#4. Портованість

Рендерити можна не лише в браузері:

• SSR (Server-Side Rendering)
• NativeScript
• Weex
• canvas тощо.

Тому що Virtual DOM - це абстракція.

---

#Недоліки Virtual DOM (часто запитують!)

• не швидше за ручні (handwritten) DOM-операції
• diff все одно потребує обчислень
• зайва абстракція

Але в 99% випадків плюси переважують мінуси.