Если коротко: это новый стратегический режим компиляции, который полностью отказывается от Virtual DOM (VDOM) в пользу прямого манипулирования реальным DOM.
В чём суть?
Сейчас Vue 3 использует Virtual DOM: при изменении состояния создаётся новое виртуальное дерево, сравнивается со старым (diffing), и только потом изменения вносятся в реальный DOM. Это работает быстро, но не бесплатно с точки зрения памяти и CPU.
Vapor Mode берет вдохновение у Svelte и SolidJS. Он компилирует ваши шаблоны в чистый JavaScript, который при изменении состояния обновляет только конкретные узлы DOM напрямую, используя существующую систему реактивности (Signals / Reactivity API).
Главные преимущества
* Нулевой оверхед на VDOM: Нет этапа comparison/diffing виртуальных деревьев.
* Меньше памяти: Не нужно держать в памяти структуры виртуальных узлов.
* Микроскопический бандл: Если ваш проект полностью written/compiled в Vapor Mode, базовый runtime Vue становится катастрофически мал (не нужно тащить сам VDOM-движок).
* Молниеносный Performance: Особенно заметно на слабых устройствах и при работе с огромными списками/таблицами.
Как это выглядит в коде?
С точки зрения синтаксиса
.vue файлов ничего не меняется. Вы пишете тот же <script setup> и тот же Composition API.Разница происходит на этапе сборки. Включить Vapor Mode можно будет как на уровне отдельных компонентов (через суффикс, например, `.vapor.vue`), так и для всего приложения целиком.
<!-- Ваш привычный код будет компилироваться в прямой DOM-manipulation -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">Count: {{ count }}</button>
</template>
Бесшовный переход
Один из главных плюсов концепции — постепенная интеграция (Opt-in). Вам не придётся переписывать всё приложение сразу:
* Vapor-компоненты смогут работать внутри обычных VDOM-компонентов.
* Обычные VDOM-компоненты можно будет вставлять в Vapor-дерево.
Когда ждать и стоит ли переходить?
Vapor Mode всё ещё находится в активной разработке. Это не замена текущему Vue 3, а альтернативная стратегия компиляции для случаев, когда критически важна максимальная производительность.
Если вы делаете стандартные SPA/dashboard текущего VDOM Vue 3 хватает с запасом. Но для высоконагруженных UI, мобильных webview и приложений с жесткими требованиями к перформансу Vapor станет мощнейшим бустом.
#полезнаястатья