Предстоящий Vapor Mode в Vue 3.6 выйдет этой осенью, и он делает то, чего фреймворк никогда не делал раньше: он компилирует однофайловые компоненты в обновления, направленные напрямую в DOM, полностью обходя виртуальный DOM.

Почему Vue отказывается от виртуального DOM

Начиная с Vue 2, виртуальный DOM был основой модели реактивности фреймворка. При изменении состояния Vue строит легковесное дерево в памяти, сравнивает его с предыдущей версией (diffing) и обновляет только те части, которые изменились. Эта косвенность позволяет разработчикам писать декларативный код, не беспокоясь о том, какой именно элемент нуждается в обновлении. Обратной стороной является то, что каждый рендеринг все равно требует затрат на построение и сравнение этого виртуального дерева.

Vapor Mode исключает этот промежуточный этап. Во время сборки компилятор Vue анализирует шаблон и генерирует JavaScript, который вызывает нативные методы DOM — element.textContent = …, element.setAttribute(...) — непосредственно там, где требуется изменение. Виртуальные узлы не создаются, цикл сравнения не запускается. В итоге бандл содержит только тот код, который необходим для конкретных написанных вами обновлений, плюс runtime, нужный для реактивности.

Влияние на размер и скорость в реальных условиях

  • Размер бандла — за счет исключения runtime виртуального DOM и его структур данных объем генерируемого кода уменьшается. В проектах с большими сетками или холстами (canvas), которые обновляются десятки раз в секунду, эта экономия становится существенной, особенно при низком качестве интернет-соединения.
  • Производительность — прямые вызовы DOM позволяют избежать накладных расходов на сравнение (diffing), что становится заметным при высокочастотных изменениях интерфейса. В наборе моих личных браузерных игр — нонограмме, клоне «Сапера» и 3D-визуализаторе кубика Рубика — я писал логику рендеринга вручную, обновляя DOM только там, где это необходимо.
  • Эргономика для разработчика — основную работу выполняет компилятор. Вы по-прежнему пишете обычные шаблоны Vue; вам не нужно вручную прописывать вызовы document.querySelector. Сгенерированный код повторяет тот ручной подход, который обеспечил мне наилучшую производительность в тех играх.

Когда Vapor Mode действительно полезен

  1. Высокочастотные обновления больших структур — больше всего выигрывают игры, насыщенные данными дашборды или любые интерфейсы, которые перерисовывают множество ячеек за один такт. Сравнение (diffing) большой сетки на каждом такте может поглотить весь бюджет кадра; прямые обновления делают работу линейной и предсказуемой.
  2. Развертывания с ограничениями по размеру бандла — сайты, ориентированные на мобильные устройства (mobile-first), которые должны загружаться в пределах нескольких сотен килобайт, заметно уменьшаются в объеме после исчезновения runtime виртуального DOM.
  3. Чистое, предсказуемое состояние — Vapor Mode предполагает, что вы сохраняете состояние неизменяемым (immutable) и относитесь к DOM как к чистому отражению этого состояния. Если ваш код смешивает побочные эффекты или изменяет DOM вне системы реактивности Vue, сгенерированные обновления могут рассинхронизироваться, вызывая визуальные артефакты.

Где старый подход все еще выигрывает

  • Интерфейсы с низкой частотой обновлений — простые формы, статические страницы или админ-панели, которые перерисовываются лишь при редких действиях пользователя, получают мало преимуществ в производительности. Дополнительная работа по построению виртуального дерева ничтожна по сравнению с сетевыми задержками или временем обработки на сервере.
  • Сложные иерархии компонентов — когда в глубоком дереве меняется только листовой узел, виртуальный DOM может автоматически пропускать большие его части. Прямые обновления заставляют компилятор генерировать точные патчи для каждого возможного изменения, что в пограничных случаях может увеличить размер кода.
  • Инструментарий и экосистема — многие плагины Vue, инструменты разработчика (devtools) и утилиты для тестирования завязаны на уровне виртуального DOM. Этим интеграциям могут потребоваться обновления для работы с компонентами в режиме Vapor Mode, пока экосистема не подтянется.

На что обратить внимание дальше

  • Стабильный релиз — Vue 3.6 находится в статусе release candidate. Команда планирует финальный стабильный запуск этой осенью. Ранним последователям стоит дождаться этой версии, прежде чем выпускать продакшн-код.
  • Путь миграции — существующие проекты на Vue могут подключать Vapor Mode выборочно, на уровне отдельных компонентов.
  • Инструменты измерения производительности — бенчмарки, сравнивающие сборки на базе виртуального DOM и Vapor Mode в реальных приложениях, помогут командам решить, стоит ли этот компромисс того.

Итог

Vapor Mode предлагает разработчикам Vue лучшее из двух миров: любимый ими декларативный синтаксис и чистую скорость ручного обновления DOM. Он особенно эффективен для приложений, которые обновляют большие части UI многократно в секунду, и для развертываний, где важен каждый килобайт. Для интерфейсов с низкой частотой обновлений традиционный виртуальный DOM остается вполне жизнеспособным и более простым выбором. По мере перехода этой функции из статуса release candidate в стабильную версию, сообществу Vue придется сопоставлять экономию размера бандла с готовностью экосистемы и специфическим профилем производительности своих приложений.