Какой тип данных у Virtual DOM

«Какой тип данных у Virtual DOM» — вопрос из категории Архитектура, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Virtual DOM — это не отдельный тип данных, а концепция. Обычно он реализуется как легковесный JavaScript-объект (чаще всего plain object), который представляет текущее состояние реального DOM.

Пример структуры:

{
  type: 'div',
  props: { className: 'container' },
  children: [
    { type: 'h1', props: {}, children: ['Hello'] },
    { type: 'p', props: { id: 'desc' }, children: ['World'] }
  ]
}

Ключевые особенности:

  • Имеет древовидную структуру
  • Содержит только необходимые для рендеринга данные
  • Быстрее для сравнения, чем реальный DOM
  • Обновляется при изменении состояния приложения