Vue 3.6 Vapor Mode: componentes sin Virtual DOM

Desde sus inicios, Vue ha utilizado un Virtual DOM para gestionar las actualizaciones de la interfaz. Funciona, y funciona bien, pero tiene un coste: más JavaScript que parsear, más memoria para mantener esa representación virtual y más trabajo en cada ciclo de actualización.

Vue 3.6 introduce Vapor Mode, una estrategia de compilación alternativa que elimina el Virtual DOM por completo. Los componentes Vapor generan manipulaciones directas del DOM real, similares a lo que hace SolidJS.

Como activarlo

Basta con añadir el atributo vapor a <script setup>:

<script setup vapor>
import { ref } from 'vue'

const count = ref(0)
</script>

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

    

Tu código no cambia. La plantilla y la Composition API se usan exactamente igual. Lo que cambia es lo que el compilador genera por debajo: en lugar de funciones de render con Virtual DOM, produce código que crea y actualiza nodos del DOM directamente.

App completa vs. modo mixto

Si todos tus componentes usan Vapor, puedes crear la aplicacion con createVaporApp y eliminar el runtime del Virtual DOM del bundle por completo:

import { createVaporApp } from 'vue'
import App from './App.vue'

createVaporApp(App).mount('#app')

    

Pero no es todo o nada. Si tienes una aplicacion existente con componentes VDOM y quieres ir migrando progresivamente, puedes mezclar ambos modos con vaporInteropPlugin:

import { createApp, vaporInteropPlugin } from 'vue'
import App from './App.vue'

createApp(App)
  .use(vaporInteropPlugin)
  .mount('#app')

    

De esta forma puedes convertir componentes individuales a Vapor sin tocar el resto.

Que no funciona (todavia)

Vapor Mode tiene algunas limitaciones que debes conocer:

• Solo Composition API: la Options API no esta soportada. Si aun usas data(), methods y compania, toca migrar primero.
• Solo <script setup>: no funciona con la funcion setup() manual.
• getCurrentInstance() devuelve null.
• app.config.globalProperties no esta disponible.
• Los eventos de ciclo de vida por elemento (@vue:mounted, etc.) no funcionan.

Los numeros

En los benchmarks oficiales, Vue 3.6 con Vapor Mode monta 100.000 componentes en ~100ms, situandose al nivel de SolidJS. El bundle base pesa menos de 10KB.

Conclusion

Vapor Mode es probablemente el cambio mas significativo en Vue desde la Composition API. No te obliga a reescribir nada — solo a anadir una palabra (vapor) y dejar que el compilador haga el trabajo pesado. Vue 3.6 esta en beta, pero el feature set de Vapor esta completo para todas las APIs estables.

Documentacion

• Vue 3.6.0-beta.1 Release Notes