La reutilización de código en Vue.js se logra encapsulando lógica y vista en componentes aislados. Cuando tu template crece demasiado, separar bloques repetidos en piezas independientes hace que la aplicación sea más mantenible, escalable y fácil de leer, sobre todo si trabajas con listas dinámicas o estructuras que se repiten en distintas partes de la interfaz.

¿Qué es un componente en Vue.js y por qué importa?

Un componente es un bloque autocontenido que agrupa template, datos y comportamiento, y que puedes invocar como si fuera una etiqueta HTML cualquiera. Vue.js organiza la aplicación como un árbol de componentes: existe un componente raíz creado con Vue.createApp y, debajo, tantos hijos como necesites.

¿Qué es un componente en Vue.js? Es una pieza de interfaz reutilizable que combina HTML, datos y lógica. Se declara una sola vez y se usa cuantas veces quieras dentro de otros templates.

Hasta antes de aplicar este patrón, todo vivía dentro del componente raíz: el template, los métodos, el data y las propiedades computadas. Ese enfoque funciona al inicio, pero termina volviéndose un archivo enorme difícil de mantener [01:05].

¿Cómo refactorizar tu app para registrar un componente?

El primer paso es separar la creación de la app del montaje sobre el DOM. Esto te da acceso a la instancia de la aplicación para registrarle componentes internos.

js const app = Vue.createApp({ /* opciones del root */ }) const vm = app.mount('#app')

Con app disponible, puedes registrar un componente con app.component, que recibe dos argumentos: el nombre del componente y un objeto de configuración con sus opciones de Vue.js [02:30].

js app.component('item', { template: <div class="item"> <h3>{{ post.title }}</h3> <p>{{ post.description }}</p> </div> , props: ['post'] })

¿Cómo se usa el componente dentro del template padre?

Una vez registrado, lo invocas como cualquier etiqueta HTML. Aquí es donde el v-for y el :key se mueven al lugar donde se usa el componente, no donde se define.

html <item v-for="(item, index) in posts" :key="index" :post="item"

</item>

Fíjate en el detalle: el v-for y la clase item salen del template hijo y la clase queda dentro del componente aislado. Así, el padre solo se encarga de iterar y pasar datos.

¿Cómo se comunican los componentes con props?

Los componentes hijos no leen el estado del padre por arte de magia: necesitas pasarles información explícitamente con un prop. Un prop es un atributo personalizado que defines en el hijo y al que el padre le asigna un valor.

En el ejemplo, el padre pasa cada elemento de la lista con :post="item", y el hijo lo declara así:

js props: ['post']

Dentro del template del componente item, accedes a esos datos como post.title y post.description. Esa es la frontera limpia entre quién posee los datos y quién los dibuja [05:10].

¿Qué son los props en Vue.js? Son atributos personalizados que un componente padre envía a un hijo para compartirle datos. El hijo los declara en su opción props y los usa como variables dentro del template.

¿Qué pasa si olvidas un detalle de sintaxis?

Un espacio mal puesto en el template puede romper la app entera y arrojar un error en la consola. Cuando recargas la aplicación y algo no se dibuja, el primer lugar a revisar es la sintaxis del template del componente recién creado [06:40].

¿Cómo funciona el árbol de componentes en Vue.js?

Vue.js gestiona la interfaz como un árbol jerárquico parecido al DOM, pero operando sobre un virtual DOM: una estructura en JavaScript que Vue usa internamente para calcular cambios y renderizar de forma eficiente.

• El componente raíz es el que creas con Vue.createApp y contiene a todos los demás.
• Cada componente hijo puede, a su vez, tener sus propios hijos.
• Cualquier nodo del árbol puede declarar su propio data, methods, computed y watchers.

Esa independencia es lo que hace al patrón tan poderoso: cada componente vive con sus propias responsabilidades, y la comunicación fluye por props hacia abajo.

Habilidades y conceptos clave de esta clase

• Vue.createApp y mount [01:50]: separar la creación de la instancia del montaje permite registrar componentes antes de renderizar.
• app.component [02:30]: método para registrar un componente global con nombre y objeto de opciones.
• Template aislado [03:20]: cada componente encapsula su propio HTML, incluyendo clases como item.
• Props [05:10]: mecanismo de comunicación de padre a hijo mediante atributos personalizados.
• v-for con :key [04:15]: se aplican sobre la etiqueta del componente al usarlo, no en su definición.
• Virtual DOM [07:20]: estructura en JavaScript que Vue usa para gestionar el árbol de componentes de forma eficiente.
• Reutilización [06:00]: un componente se declara una vez y se usa tantas veces como necesites.

¿Qué otros bloques del ejemplo extraerías como componentes propios? Cuéntame en los comentarios cómo reorganizarías la cuenta de usuario o el formulario para llevar esta arquitectura más lejos.