Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке Virtual DOM?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**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 лише там, де потрібно**

---

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

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

```js
{
  tag: 'p',
  children: ['Hello']
}
```

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

```js
{
  tag: 'p',
  children: ['Hello, World!']
}
```

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% випадків плюси переважують мінуси.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати303 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.