Declarative rendering con virtual DOM en Vue

Aprende, paso a paso, cómo declarative rendering en Vue 3 conecta la información con la presentación de forma fluida. Verás cómo iniciar con CDN, crear una app con createApp, enlazar datos con v-text y v-model, y entender por qué el virtual DOM y la reactividad hacen que todo se actualice de manera eficiente.

¿Cómo iniciar un proyecto con Vue 3 desde CDN?

Empezar es rápido y directo. La idea central: agregar Vue desde CDN, crear la app con createApp, definir data() y montar con mount en un elemento del DOM.

¿Qué pasos seguir para instalar Vue 3?

• Visitar vuejs.org y entrar en la guía.
• Elegir la versión 3 ("One Piece").
• Ir a instalación y seleccionar opción por CDN.
• Copiar el script y pegarlo en tu HTML.

<!-- Estructura base -->
<div id="app"></div>

<!-- Script de Vue 3 desde CDN (copiado de la guía oficial) -->
<script src="[url-cdn-vue]"></script>

¿Cómo crear y montar la app con createApp y mount?

• Extraer la función createApp del objeto global Vue.
• Definir data() como función que retorna un objeto con el estado de la UI.
• Montar la app sobre el elemento con id app.

const { createApp } = Vue;

const app = createApp({
  data() {
    return {
      message: 'hola, Vue'
    };
  }
});

app.mount('#app');

¿Cómo se vinculan datos y UI con directivas v-text y v-model?

Las directivas permiten enlazar el estado a la vista sin manipular el DOM manualmente. Aquí destacan v-text, que actualiza innerText, y v-model, que conecta el valor del input con el estado.

¿Qué hace la directiva v-text en el DOM?

• Enlaza dinámicamente el innerText del elemento.
• Refleja el valor de message en pantalla.

<span v-text="message"></span>

¿Cómo funciona v-model con un input?

• Conecta el value del input con message.
• Al escribir en el input, la UI y los datos se mantienen sincronizados.

<input v-model="message" />

• Un mismo estado, dos vistas conectadas: el <span> y el <input> muestran el mismo message.
• Sin código extra de sincronización: Vue gestiona el enlace entre datos y presentación.

¿Qué resuelve el declarative rendering con virtual DOM y reactividad?

El corazón del enfoque declarativo está en dos ideas: virtual DOM y reactividad. Juntas permiten que Vue actualice solo lo necesario, manteniendo la interfaz rápida y consistente.

¿Qué es el virtual DOM en Vue?

• Es un clon del DOM real representado como objeto de JavaScript.
• Vue observa sus nodos y propiedades para detectar cambios.
• Trabajar con objetos es eficiente: es fácil observar y comparar estados.

¿Cómo decide qué actualizar en el navegador?

• Compara el virtual DOM con el estado anterior y el actual.
• Cambia únicamente los nodos con propiedades dinámicas que variaron.
• Si un elemento no depende de datos reactivos, no se vuelve a renderizar.

¿Qué papel cumple la reactividad?

• Permite a Vue observar los cambios en los datos definidos en data().
• Activa las actualizaciones necesarias en el virtual DOM y, por ende, en la UI.
• Sienta las bases para profundizar en el “sistema reactivo” más adelante.

¿Quieres que revisemos un ejemplo concreto o integrar eventos junto a v-model? Comparte tus dudas o el fragmento de código que estás probando y lo mejoramos juntos.