Vue Academy · Урок

Режим Vue Vapor: оптимизация на этапе компиляции

Режим Vapor удаляет виртуальный DOM: разберём влияние на производительность и компиляцию с явным включением

Урок 1 из 413 шагов

«Режим Vue Vapor: оптимизация на этапе компиляции» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Что такое режим Vapor

Режим Vapor — это альтернативная стратегия компиляции для Vue, которая полностью удаляет виртуальный DOM. Вместо сравнения деревьев виртуальных узлов компилятор генерирует код, напрямую обновляющий реальные узлы DOM. Этот режим включается явно и призван значительно повысить производительность и снизить потребление памяти.

Как сегодня работает виртуальный DOM

Обычно функция отрисовки возвращает дерево виртуальных узлов. При каждом обновлении Vue создаёт новое дерево и сравнивает его со старым, чтобы найти изменения. Такое сравнение требует вычислительных ресурсов во время выполнения и выделяет объекты при каждой отрисовке.

// conceptually, each render produces VNodes
function render() {
  return h('div', null, [
    h('span', null, count.value)
  ])
}
// Vue diffs new VNodes vs old to patch the DOM

Vapor: прямые обновления DOM

В режиме Vapor компилятор анализирует шаблон во время компиляции и генерирует код, который затрагивает только конкретные узлы DOM, способные измениться. Нет дерева виртуальных узлов и сравнения — реактивный эффект напрямую записывает значение в узел.

// conceptual Vapor output
const n0 = document.createElement('span')
// effect updates ONLY the text node when count changes
renderEffect(() => {
  n0.textContent = count.value
})

Та же система реактивности

Vapor сохраняет привычную для Vue реактивность — ref, reactive, computed, watch работают так же. Меняется способ применения обновлений DOM, а не способ объявления реактивного состояния.

import { ref, computed } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)
// identical authoring experience under Vapor

Включение для отдельных компонентов

Vapor включается для каждого компонента отдельно, а не глобально. Это позволяет постепенно переносить приложение и одновременно использовать в нём компоненты Vapor и обычные компоненты. Распространённый подход — добавить специальный маркер в <script setup> или конфигурацию сборки.

<script setup vapor>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

Почему это быстрее

Пропуская создание и сравнение виртуального DOM, Vapor уменьшает нагрузку на CPU при каждом обновлении и создаёт значительно меньше объектов, снижая нагрузку на сборщик мусора. При первоначальном монтировании также создаётся меньше служебных накладных расходов среды выполнения, поэтому уменьшается объём используемой памяти.

Меньшая среда выполнения

Компонентам Vapor не нужна среда выполнения виртуального DOM, поэтому приложение, полностью построенное на Vapor, может поставляться с меньшим пакетом среды выполнения. Механизм сравнения просто не включается.

Анализ на этапе компиляции

Вся сила этого подхода заключается в том, что компилятор отличает статические части шаблона от динамических. Статическая разметка создаётся один раз, а реактивные эффекты добавляются только для динамических привязок. Именно это разделение на статические и динамические части делает возможными прямые обновления.

<template>
  <div class="card">     <!-- static, created once -->
    <h2>{{ title }}</h2>  <!-- dynamic, gets an effect -->
  </div>
</template>

Ограничения и совместимость

На экспериментальном этапе некоторые функции и сторонние библиотеки, зависящие от виртуального DOM (пользовательские функции рендеринга и определённые API узлов виртуального DOM), могут поддерживаться в компонентах Vapor не полностью. Совместимость с обычными компонентами поддерживается, поэтому внедрять Vapor можно постепенно.

Связь с Solid и Svelte

Vapor приближает Vue к подходу без виртуального DOM с обработкой на этапе компиляции, впервые предложенному в Solid и Svelte: детализированная реактивность напрямую изменяет DOM, при этом сохраняются API и экосистема Vue.

Когда стоит выбрать Vapor

Рассмотрите Vapor для критически важных с точки зрения производительности интерфейсов, в которых часто выполняются обновления: больших списков, панелей мониторинга и анимаций. Делать это стоит после стабилизации технологии. Для обычных приложений стандартная среда выполнения уже достаточно быстра, поэтому используйте Vapor выборочно — там, где профилирование показывает его пользу.

Быстрая проверка

Проверьте, насколько хорошо Вы поняли режим Vapor.

Ответь в интерактивном уроке

Итоги

Вы узнали о режиме Vapor:

виртуальный DOM больше не сравнивается, а компилятор генерирует код для прямого обновления DOM;
используется та же система реактивности — ref, reactive и computed не изменились;
включение для отдельных компонентов позволяет внедрять технологию постепенно и сохранять совместимость;
анализ статических и динамических частей на этапе компиляции обеспечивает детализированные обновления;
ожидается значительный прирост производительности, снижение потребления памяти и уменьшение размера среды выполнения.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 42
Уроки: 156

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Режим Vue Vapor: оптимизация на этапе компиляции» бесплатный?

Да — полный текст урока «Режим Vue Vapor: оптимизация на этапе компиляции» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Режим Vue Vapor: оптимизация на этапе компиляции»?

Режим Vapor удаляет виртуальный DOM: разберём влияние на производительность и компиляцию с явным включением Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Режим Vue Vapor: оптимизация на этапе компиляции»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Режим Vue Vapor: оптимизация на этапе компиляции
Экосистема Vite: плагины и инструменты
Макросы Vue и предложения сообщества
Как выбрать подходящий стек Vue для 2025 года и далее

← Назад к Vue Academy