Vue.js es un framework progresivo para construir interfaces de usuario. En esta clase, exploraremos cómo Vue funciona en el navegador paso a paso, explicando los archivos clave de un proyecto: index.html, main.js y App.vue. También abordaremos conceptos fundamentales como el Virtual DOM y el montaje de un componente.
La Base: index.html
El archivo index.html es el punto de entrada de nuestra aplicación. Es un documento HTML simple que incluye un contenedor donde Vue montará la aplicación.
<template>: Define la estructura HTML del componente.
<script setup>: Contiene la lógica del componente. En Vue 3 se usa setup para la Composition API, lo verémos después 😉.
<style>: Contiene los estilos específicos del componente.
¿Qué Sucede en el Navegador?
Cuando el navegador carga la página:
index.html carga main.js.
main.js inicializa Vue y monta el componente App.vue dentro de #app.
Vue renderiza el contenido de App.vue dentro del div id="app".
Todo esto sucede en algo llamado “Virtual DOM”. El Virtual DOM es una representación optimizada del DOM real. En lugar de modificar directamente el DOM (lo cual es costoso en rendimiento).
Vue trabaja con una versión virtual que compara cambios y actualiza solo lo necesario. Esto hace que la renderización sea más eficiente.
Cada archivo con terminación .vue se le considera un Single File Component. Cada archivo que existe con esta terminación Vue lo procesa de la siguiente forma:
Crea una instancia del componente.
Renderiza (Dibuja en el navegador) su contenido usando el Virtual DOM.
Lo inserta en el DOM real dentro del elemento especificado (#app).
Una vez termina este proceso se dice que el componente ha sido montado.
Vue simplifica el desarrollo de aplicaciones web mediante su sistema basado en componentes y el uso del Virtual DOM para optimizar actualizaciones.
Ahora que entiendes cómo Vue se monta en el navegador, estás listo para profundizar más en su ecosistema y crear aplicaciones interactivas.
