El Virtual DOM es una de las características clave de Vue que permite que las actualizaciones en la interfaz de usuario sean eficientes y rápidas.
En esta clase, exploraremos a fondo cómo funciona el Virtual DOM en Vue, cómo se generan y comparan los nodos, y qué técnicas utiliza Vue para minimizar los cambios en el DOM real.
¿Qué es el Virtual DOM?
El Virtual DOM (VDOM) es una representación en memoria del DOM real. Vue no manipula directamente el DOM del navegador porque las operaciones sobre él son costosas en términos de rendimiento. En su lugar, Vue:
Crea una versión virtual del DOM (un árbol de nodos en memoria).
Compara esta versión virtual con la anterior para detectar diferencias (proceso de "differencing").
Aplica solo los cambios necesarios al DOM real mediante un proceso llamado "patching".
Esto permite que las actualizaciones sean rápidas y eficientes.
2. Creación del Virtual DOM en Vue
Cuando un componente Vue se renderiza, genera un árbol de nodos virtuales (VNodes). Un VNode (nodo virtual) es un objeto JavaScript que representa un nodo en el DOM. Por ejemplo:
const vnode ={tag:'div',props:{class:'container'},children:[{tag:'h1',props:{},children:['Hola, Vue!']},{tag:'p',props:{},children:['Este es un ejemplo del Virtual DOM.']}]};
Este VNode representa el siguiente DOM real:
<divclass="container"><h1>Hola, Vue!</h1><p>Este es un ejemplo del Virtual DOM.</p></div>
Diferencias entre Virtual DOM y DOM Real
Característica
Virtual DOM
DOM Real
Representación
Objetos JavaScript
Nodos HTML
Manipulación
Rápida y eficiente
Costosa
Redibujado
Comparación previa a cambios
Se redibuja por cada cambio
Rendimiento
Alto (solo cambia lo necesario)
Bajo si se modifican muchos nodos
Cómo Vue usa el Virtual DOM
Cuando los datos de un componente cambian, Vue sigue estos pasos:
Renderización del nuevo Virtual DOM: Vue vuelve a generar un nuevo árbol de VNodes con los cambios aplicados.
Comparación con el Virtual DOM anterior (Diffing Algorithm): Vue usa un algoritmo eficiente para comparar los VNodes antiguos y nuevos.
Patching (Actualización del DOM real): Vue actualiza solo las partes que han cambiado en el DOM real.
Ejemplo:
<scriptsetup>import{ ref }from'vue';const mensaje =ref('Hola, Vue!');constcambiarMensaje=()=>{ mensaje.value='El Virtual DOM actualizó este mensaje!';};</script><template><div><h1>{{ mensaje }}</h1><button@click="cambiarMensaje">Actualizar</button></div></template>
Cada vez que el usuario hace clic en el botón, Vue genera un nuevo Virtual DOM, lo compara con el anterior y actualiza solo el <h1>, sin afectar el resto del DOM.
El algoritmo de "Diffing" y optimizaciones en Vue
Vue utiliza un algoritmo de comparación optimizado para minimizar los cambios en el DOM real:
Comparación de Nodos: Si el nuevo nodo y el antiguo tienen el mismo tipo y clave, Vue mantiene el nodo y solo actualiza su contenido.
Reutilización de elementos: Si hay listas de elementos, Vue intenta reutilizar los nodos en lugar de destruirlos y crearlos de nuevo.
Eliminación y creación eficiente: Si un nodo ya no existe en el nuevo Virtual DOM, Vue lo elimina del DOM real.
Fragmentos y key: Vue utiliza la propiedad key para optimizar el renderizado de listas, evitando reordenamientos innecesarios.
Ejemplo de key para mejorar rendimiento:
<template><ul><liv-for="item in items":key="item.id">{{ item.text }}</li></ul></template>
Usar :key en listas ayuda a Vue a identificar cada elemento y evitar cambios innecesarios en el DOM.
Beneficios del Virtual DOM en Vue
✅ Mejor rendimiento: Se actualizan solo las partes necesarias del DOM.
✅ Menos repintados: Evita renders completos y hace parches eficientes.
✅ Desarrollo más fácil: Permite manejar cambios en la UI de manera declarativa y reactiva.
✅ Optimización automática: Vue aplica estrategias internas para optimizar la actualización de nodos.
El Virtual DOM es un concepto clave en Vue que optimiza la manipulación del DOM real, haciendo que las actualizaciones sean rápidas y eficientes.
Gracias a su algoritmo de comparación y estrategias de "patching", Vue mejora el rendimiento de las aplicaciones web modernas. 🔥
Hola profe, muchas gracias por el contenido, una duda:
¿Si el VDOM presenta un mejor rendimiento, como le hicieron para el vapor mode de vue?
Que no usan VDOM
VDOM fue revolucionario, pero no es el final de la optimización. por otro lado Vue Vapor Mode deja de usar VDOM porque el sistema reactivo + compilación puede ser más rápido, más liviano y más directo. Es como pasar de interpretar a compilar a código máquina especializado. No necesita comparar el DOM virtual si no que ya sabe excactamente que node del DOM necesita cambiar.
