Что такое Virtual DOM во Vue?

Question

Accepted Answer

## Сначала картина целиком
**Virtual DOM** — лёгкое JS-описание UI (VNode-дерево). Vue сравнивает новое дерево с предыдущим (**diff/patch**) и меняет реальный DOM точечно.

## Зачем
Прямые манипуляции DOM дороги и хрупки. Декларативный render → VNodes → минимальные DOM-операции. Во Vue 3 компилятор шаблонов ещё генерирует **Block Tree** / static hoisting / PatchFlags, чтобы пропускать статику.

```js
// концептуально: h() создаёт VNode
import { h } from 'vue'
const vnode = h('div', { class: 'box' }, 'Hello')
```

Шаблоны компилируются в render-функции, которые возвращают такие деревья. Вам редко нужно писать `h()` вручную.

## Важно понимать
VDOM — не «всегда быстрее jQuery»: выигрыш в предсказуемом обновлении большого UI. Оверхед диффа всё же есть; отсюда `v-once`, `v-memo`, shallow reactivity.

## Итог
Virtual DOM — промежуточное дерево VNode между состоянием и DOM; Vue 3 сильнее оптимизирует patch благодаря компилятору.