Vue 3.6 Vapor Mode позволяет отказаться от виртуального DOM и работать непосредственно с реальным DOM. Вы добавляете один флаг, получаете огромную скорость и значительно меньший размер бандла. Вот как это работает.
Почему появился виртуальный DOM
Браузеры позволяют изменять страницу путем взаимодействия с DOM-деревом. Ранние фреймворки делали это вручную, но это работало медленно и было чревато ошибками. Виртуальный DOM (VDOM) появился, чтобы облегчить этот процесс. Он хранит легковесную копию DOM в памяти. Когда данные меняются, фреймворк:
- Отображает новое виртуальное дерево
- Сравнивает его со старым (дифференцирование)
- Определяет минимальные обновления DOM
- Применяет эти изменения
Это избавляет вас от ручной работы с DOM и объединяет множество обновлений в одно. Но создание и сравнение деревьев требует ресурсов ЦПУ и памяти. Vue 3 добавил компиляторские трюки (статическое поднятие, патч-флаги), чтобы сократить большую часть ненужной работы, но он все равно создает и сравнивает узлы VDOM во время выполнения.
Как работает Vapor Mode
Vapor Mode пропускает VDOM во время выполнения. Компилятор преобразует ваш <template> в код прямого обновления DOM. Вместо создания объектов VNode и сравнения их, он генерирует функции, которые:
- Создают узлы DOM
- Следят точно за тем, какие части зависят от какого реактивного значения
- Обновляют только измененный узел, когда значение меняется
На практике вы пишете тот же компонент:
<script setup vapor>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">
Count: {{ count }}
</button>
</template>
С Vapor Mode компилятор Vue выводит код вроде следующего:
// создать <button>, установить текст и обработчик клика
// отслеживать `count`, чтобы обновлять только текстовый узел при изменении
Это устраняет создание узлов VNode и дифференцирование. Используется реактивная система Vue (Proxy + отслеживание эффектов), чтобы запускать только необходимую функцию обновления. Это означает меньше JavaScript для парсинга, меньше памяти для хранения узлов и быстрее обновление.
Повышение производительности
Официальные тесты показывают значительные улучшения в Vapor Mode:
- Размер бандла ("Привет мир"):
VDOM: 22,8 КБ
Vapor: 7,9 КБ (-65%) - Сложное сравнение списков:
VDOM = базовая скорость (1x)
Vapor = 1,66x скорости (~ на 40% быстрее) - Пиковая загрузка памяти:
VDOM = 100%
Vapor = 58% (-42%)
Короче говоря: объем загружаемого JavaScript сокращается примерно на две трети, а используемая память уменьшается почти вдвое.
Как использовать Vapor Mode
Включить:
<script setup vapor>
//ваш код
</script>
Options API
Пока не поддерживается. Используйте только с <script setup>.
Пользовательские директивы
Новая форма принимает реактивный геттер и может возвращает функцию очистки:
const MyDirective = (el, valueGetter) => {
watchEffect(() => {
el.textContent = valueGetter()
})
return () => console.log('чистить при удалении')
}
- Доступен кодмод для миграции существующих директив.
- Совместимость с библиотеками интерфейсов
Используйте vaporInteropPlugin для смешивания Vapor Mode с Element Plus или Ant Design Vue. Стандартные пропсы, события, слоты работают. Сложные случаи требуют тестирования. - createVaporApp
Новые проекты могут начинаться вообще без среды выполнения VDOM:
npm init vue@latest --template vapor
Когда применять («Три да, три нет»)
✅ Применяйте в модулях критичных для производительности (домашняя страница, посадочные страницы)
✅ Новые проекты с createVaporApp
✅ Внутреннее тестирование: сообщайте проблемы, выполняйте тесты, помогайте полировать технологию
❌ Не мигрируйте весь устаревший код сразу (API все еще стабилизируется)
❌ Не применяйте там, где важны Nuxt SSR, ,
❌ Не смешивайте с глубоко использующими VDOM библиотеками без осторожности
Топ-5 вопросов разработчиков
1. Нужно ли переписывать старый код?
Нет. Просто добавьте vapor в <script setup>. Шаблоны и логика setup остаются прежними.
2. Что насчет пользовательских директив?
Используйте новый интерфейс геттера и возвращайте очистку. Запустите официальный кодмод для преобразования старых директив.
3. Можно ли использовать Element Plus или Ant Design Vue?
Да, с использованием vaporInteropPlugin. Тщательно тестируйте сложные компоненты.
4. Есть ли поддержка TypeScript?
Typescript поддерживается полностью. Типы переносятся. Vue добавляет тип VaporComponent в @vue/runtime-core. Дополнительная конфигурация не требуется.
5. Похоже ли это на React's Concurrent Mode или Angular Signals?
Скорость Vapor сопоставима с Solid или Svelte в бенчмарках. Его преимущество заключается в минимальных затратах на миграцию — достаточно одного переключателя флага. Vapor Mode является большим шагом к принципу «позвольте компилятору сделать сложную работу». Он переносит сравнения виртуального и DOM-дерева на этап сборки и дает вам более легкие и быстрые приложения. Стабильный релиз Vue 3.6 ожидается позже в 2025 году — попробуйте альфа-версию сейчас и почувствуйте разницу.
Подпишитесь на канал чтобы не пропустить новые статьи о разработке!
Оригинал статьи читайте по ссылке