Virtual DOM en Vue.js explicado

Curso de Vue.js: Componentes y Composition API

Contenido del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

23
Qué aprendiste en el curso de Vue.js 3
01:29 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:11

Virtual DOM en Vue.js explicado

Curso de Vue.js: Componentes y Composition API

Clase 8 de 23

Clase 8 / 23

Recursos

El Virtual DOM es uno de esos conceptos que, una vez lo entiendes, te cambia la forma de leer cualquier framework moderno. Está en Vue.js, en React.js y en muchos más, y dominarlo te ayuda a estructurar mejor tus componentes y entender por qué a veces necesitas hacer ajustes específicos sobre ellos.

Qué es el Virtual DOM y por qué importa en Vue.js

Antes de hablar de la copia virtual, conviene recordar al original. El Document Object Model (DOM) es la representación que hace el navegador de tu HTML como un árbol de objetos: en la raíz vive document, de ahí cuelgan head y body, y dentro encuentras divs con sus ids, botones, párrafos y todo lo demás. Cada elemento HTML es un nodo en ese árbol.

Vue.js no trabaja directamente sobre ese árbol. Usa una técnica llamada Virtual DOM, que es una copia del DOM hecha en JavaScript y que vive en la memoria RAM. En lugar de pasar tu código HTML directo a la interfaz de usuario, Vue mete una capa intermedia para manipular todo desde JavaScript primero.

¿Qué es el Virtual DOM? Es una representación del DOM real como un objeto de JavaScript guardado en memoria. Vue.js lo usa para calcular cambios antes de tocar el navegador.

Por qué Vue.js usa Virtual DOM en lugar del DOM real

La respuesta corta es rendimiento. Cada vez que accedes al DOM real con métodos de JavaScript Vanilla como createElement o getElementById, el navegador paga un costo. Hacerlo manualmente suma líneas de código y, sobre todo, acceder al DOM desde JavaScript cuesta en términos de performance.

Modificar un objeto que ya está en JavaScript, en cambio, es mucho más rápido. Y aquí viene lo interesante: el Virtual DOM es justo eso, un objeto de JavaScript que puedes leer, modificar, recorrer y comparar sin tocar el navegador.

El flujo que sigue Vue.js cuando algo cambia funciona así:

Detecta el cambio (una variable que se actualizó, un prop que llegó de un componente padre a un hijo, un dato nuevo).
Actualiza primero el Virtual DOM con todas las modificaciones: pone, quita, vuelve a poner.
Cuando ya tiene la versión final lista, recién ahí aplica todos los cambios al DOM real de una sola vez.

Ese último paso es la clave. En vez de mil viajes pequeños al navegador, Vue hace un solo viaje con el paquete completo. Ahorras tiempo de procesamiento, ahorras memoria y el framework gana facilidad para manejar todos tus componentes.

¿Por qué es más rápido el Virtual DOM que manipular el DOM directamente? Porque trabajar con un objeto en JavaScript es barato, y cada acceso al DOM real es caro. Vue agrupa los cambios en el Virtual DOM y los aplica al DOM real en una sola operación.

Cómo se conecta el Virtual DOM con los componentes de Vue

Esta es la pieza que une todo. Tus componentes en Vue.js no son elementos del DOM real, son elementos que viven en el Virtual DOM. Por eso cuando hablamos de renderizado, de paso de props entre padre e hijo o de reactividad, en realidad estamos hablando de cosas que ocurren primero en esa capa virtual de JavaScript.

Y aquí entra el siguiente tema natural: el ciclo de vida de los componentes. Vue te da puntos específicos donde puedes engancharte, justo porque internamente está coordinando creaciones, actualizaciones y destrucciones sobre el Virtual DOM antes de reflejarlas en pantalla. Sin entender esta capa intermedia, el ciclo de vida se siente arbitrario; con ella, todo cuadra.

Ten siempre en mente que Vue.js está usando Virtual DOM por detrás todo el tiempo. Cada vez que veas un comportamiento raro, un re-render inesperado o necesites optimizar un componente, vuelve a esta idea: hay un objeto de JavaScript en memoria que es la fuente de verdad antes de que el navegador dibuje nada.

Si necesitas releer esta explicación dos o tres veces, hazlo sin culpa. Y deja tus dudas en los comentarios para resolverlas en comunidad.

Yefreilee Danny Samuel Parra

Hace 4 años

Dejo un breve resumen de lo visto en esta maravillosa clase.

En el Dom tradicional, representa todos los objetos HTML como un árbol de objetos en un árbol de elementos, donde el DOCUMENT es la raíz, luego viene el header, el body, etc.… Y todo esto se va acomodando en forma de árbol.

Vue Js lo que hace es utilizar una capa intermedia hecha en JavaScript, y esto es porque cada vez que quieres realizar accesos al DOM de forma manual por ejemplo utilizando create element o getElementById y todas esas formas que nos da JavaScript de acceder al DOM y controlarlo, agregar y quitar elementos.

Si lo hacemos manualmente pueden llegar a ser bastantes líneas de código y esto hace que sea bastante pesado, porque además acceder desde JS hacia el DOM cuesta en términos de performance.

Sin embargo, si solamente haces un cambio sobre un objeto en JavaScript, estando en JavaScript los cambios van a ser mucho más rápidos.

Es por esto que lo que hacen los Framework como Vue JS es tener una representación que es una copia del DOM, pero es un DOM virtual, es decir, es un objeto de JavaScript que esta viviendo en la memoria RAM y por lo tanto es mucho más fácil acceder y modificar como cualquier otro objeto en JS.

Siempre VUE JS lo que va a hacer es actualizar el Virtual DOM y una vez que lo tiene actualizado llega hacia el DOM y le aplica esos cambios de una sola vez, así ahorramos tiempo de procesamiento, también ahorramos capacidad de memoria y lo mas importante se vuelve mucho más fácil el manejo para el framework de todos los elementos que esta utilizando.

VUE JS siempre va a estar utilizando VIRTUAL DOM por detrás.

Introducción

Options API vs Composition API en Vue 3

Crear y configurar proyectos con Vue CLI

Estructura de archivos en proyectos Vue CLI

Built-in Components

Componentes dinámicos con Vue.js

Componentes asíncronos con defineAsyncComponent

Transiciones con fade en Vue.js

Teleports en Vue 3 para mover modales al DOM

Componentes personalizados

Virtual DOM en Vue.js explicado

Hooks del ciclo de vida en Vue.js

Hooks del ciclo de vida en Vue con ejemplos

Mixins en Vue.js: reutilización con riesgos

Composition API

Composition API: setup en Vue 3

Hooks del ciclo de vida en Vue 3 setup

`ref` y `reactive` en Vue Composition API

Watchers con Composition API en Vue.js

Propiedades computadas con Composition API

Props reactivos con toRefs en Vue.js

El argumento context en Vue 3 setup

provide e inject en Vue Composition API

Template Refs en Vue 3 con Composition API

Composition API vs Options API en Vue.js

script setup en Vue 3 sin export default

Cierre del curso

Qué aprendiste en el curso de Vue.js 3

Virtual DOM en Vue.js explicado

Progreso del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

Recursos

Recursos