Vue Academy · Leçon

Mode Vapor de Vue : optimisation à la compilation

Le mode Vapor supprime le DOM virtuel, ses implications sur les performances et la compilation activable

Mode Vapor de Vue : optimisation à la compilation est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Qu’est-ce que le mode Vapor

Le mode Vapor est une stratégie de compilation alternative pour Vue qui supprime entièrement le DOM virtuel. Au lieu de comparer des arbres de nœuds virtuels, le compilateur génère du code qui met directement à jour les nœuds réels du DOM. Ce mode est activé volontairement et vise d’importants gains de performances et de mémoire.

Fonctionnement actuel du DOM virtuel

Normalement, une fonction de rendu renvoie un arbre de nœuds virtuels. À chaque mise à jour, Vue crée un nouvel arbre et le compare à l’ancien pour repérer les changements. Cette comparaison a un coût à l’exécution et alloue des objets à chaque rendu.

// 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 : mises à jour directes du DOM

En mode Vapor, le compilateur analyse le modèle au moment de la compilation et génère du code qui ne touche qu’aux nœuds du DOM susceptibles de changer. Aucun arbre de nœuds virtuels ni comparaison : un effet réactif écrit directement dans le nœud.

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

Le même système de réactivité

Vapor conserve la réactivité familière de Vue : ref, reactive, computed et watch fonctionnent de la même manière. Ce qui change, c’est la façon dont les mises à jour du DOM sont appliquées, et non la manière dont vous déclarez l’état réactif.

import { ref, computed } from 'vue'

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

Activation au cas par cas pour chaque composant

Vapor est activé composant par composant, et non globalement. Cela vous permet d’effectuer une migration progressive et de mélanger des composants Vapor et des composants classiques dans la même application. Une convention courante consiste à utiliser un marqueur dans <script setup> ou dans la configuration de compilation.

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

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

Pourquoi c’est plus rapide

En évitant la création et la comparaison des nœuds virtuels, Vapor réduit le travail du CPU à chaque mise à jour et alloue beaucoup moins d’objets, ce qui réduit la pression exercée sur le ramasse-miettes. Le montage initial génère également moins de surcharge du moteur d’exécution et réduit l’empreinte mémoire.

Moteur d’exécution plus léger

Comme les composants Vapor n’ont pas besoin du moteur d’exécution du DOM virtuel, une application entièrement construite avec Vapor peut fournir un paquet du moteur d’exécution plus léger. Le mécanisme de comparaison n’est tout simplement pas inclus.

Analyse à la compilation

La puissance de cette approche vient du fait que le compilateur distingue les parties statiques des parties dynamiques d’un modèle. Le balisage statique est créé une seule fois ; seuls les liens dynamiques produisent des effets réactifs. Cette séparation entre statique et dynamique permet les mises à jour directes.

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

Limitations et interopérabilité

Pendant sa phase expérimentale, certaines fonctionnalités et bibliothèques tierces qui dépendent du DOM virtuel (fonctions de rendu personnalisées, certaines API de nœuds virtuels) peuvent ne pas être entièrement prises en charge dans les composants Vapor. L’interopérabilité avec les composants classiques est prise en charge, ce qui vous permet de l’adopter progressivement.

Relation avec Solid et Svelte

Vapor rapproche Vue de l’approche à la compilation, sans DOM virtuel mise en avant par Solid et Svelte — une réactivité fine pilotant des mutations directes du DOM — tout en conservant l’API et l’écosystème de Vue.

Quand choisir Vapor

Envisagez Vapor pour les interfaces utilisateur exigeantes en performances et comportant de nombreuses mises à jour (grandes listes, tableaux de bord, animations) une fois la solution stabilisée. Pour les applications classiques, le moteur d’exécution standard est déjà rapide ; adoptez Vapor de manière ciblée lorsque le profilage montre qu’il apporte un bénéfice.

Vérification rapide

Vérifiez votre compréhension du mode Vapor.

Récapitulatif

Vous avez découvert le mode Vapor :

Il supprime la comparaison du DOM virtuel ; le compilateur produit du code de mise à jour directe du DOM
Le même système de réactivité est conservé — ref, reactive, computed restent inchangés
L’activation au cas par cas pour chaque composant permet une adoption progressive et l’interopérabilité
L’analyse statique/dynamique à la compilation permet des mises à jour fines
Des gains importants sont attendus en performances, en mémoire et en taille du moteur d’exécution

Questions Fréquemment Posées

La leçon « Mode Vapor de Vue : optimisation à la compilation » est-elle gratuite ?

Oui — le texte complet de « Mode Vapor de Vue : optimisation à la compilation » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Mode Vapor de Vue : optimisation à la compilation » ?

Le mode Vapor supprime le DOM virtuel, ses implications sur les performances et la compilation activable Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Mode Vapor de Vue : optimisation à la compilation » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Mode Vapor de Vue : optimisation à la compilation
Écosystème Vite : plugins et outils
Macros Vue et propositions communautaires
Choisir la bonne pile Vue pour 2025 et au-delà

← Retour à Vue Academy