VUE MEETUP

Iniciación a VUE.js

The ProgressiveJavaScript Framework

• Vue 3 es un framework de JavaScript de código abierto.

• Se utiliza principalmente para construir interfaces de usuario interactivas y dinámicas en aplicaciones web.

• Fue desarrollado por Evan You, y es la tercera versión de Vue.js, la cual introduce mejoras significativas en comparación con sus versiones anteriores.

Características clave de Vue 3

1. Reactividad Mejorada: Vue 3 presenta un sistema de reactividad más eficiente llamado "Proxy" en lugar de "Object.defineProperty" que se utilizaba en Vue 2. Esto hace que la detección de cambios en los datos sea más rápida y precisa.
2. Composición: introduce el concepto de "Composición", que permite dividir la lógica de la interfaz de usuario en componentes más pequeños y reutilizables, facilitando el desarrollo y el mantenimiento de aplicaciones complejas.
3. Portabilidad: Vue 3 es modular, lo que significa que puedemos utilizar sus características por separado, lo que lo hace altamente adaptable a diferentes tipos de proyectos y necesidades.

4. Rendimiento Mejorado: gracias a su nuevo sistema de reactividad y otras optimizaciones internas, Vue 3 es más rápido y consume menos memoria que su predecesor.5. Compatibilidad: aunque Vue 3 introduce cambios significativos con respecto a Vue 2, se ha hecho un esfuerzo para proporcionar una capa de compatibilidad, por lo que migrar aplicaciones existentes de Vue 2 a Vue 3 es sencillo.

Proporciona una alternativa a la forma tradicional de definir componentes en Vue 2. La Composition API ofrece una forma más flexible y organizada de componer la lógica de un componente.

• Funciones: en lugar de definir todas las opciones de un componente en un objeto, podemos utilizar funciones para definir la lógica de nuestro componente. Esto hace que el código sea más legible y modular.
• Reactividad a nivel de función: la Composition API permite la reactividad a nivel de función. Esto significa que puedes declarar reactividad específica dentro de cada función, lo que facilita la gestión de los datos reactivos en el ámbito de una función específica.

Composition API vs Options API

• Composición de funciones: podemos crear funciones reutilizables que encapsulan la lógica y los efectos secundarios, y luego disponer estas funciones en los componentes según sea necesario. Esto fomenta la reutilización de la lógica en diferentes partes de la aplicación.

• Refs y Reactividad Explicita: Vue 3 utiliza 'ref ' (y también 'reactive' ) para declarar y trabajar con datos reactivos de manera más explícita. Esto hace que sea más claro dónde y cómo se utiliza la reactividad en el componente.

• Efectos secundarios: podemos utilizar el hook 'onMounted' para realizar acciones cuando un componente se monta en el DOM, y otros hooks como 'onUpdated ' y 'onUnmounted ' para gestionar efectos secundarios en diferentes momentos del ciclo de vida del componente.

Vue 3 y el modelo de diseño atómico

• El modelo de diseño atómico es una metodología de desarrollo de software que aboga por dividir una aplicación en componentes pequeños, independientes y autónomos, llamados "átomos". Estos átomos representan las partes más básicas y simples de una aplicación y se pueden combinar para construir componentes más grandes y complejos.

• Vue 3 es un framework que se ajusta naturalmente al modelo atómico de desarrollo. Esto se debe a su enfoque en la creación de componentes reutilizables y autónomos, que pueden ser combinados para construir aplicaciones más grandes y complejas.

Los Componentes de Archivo Único (SFC): ¿Qué es un Componente de Archivo Único (SFC)?

• Un Componente de Archivo Único es una forma organizada de definir componentes en Vue, donde se incluyen la plantilla(el template), la lógica y los estilos en un solo archivo .vue.

• Simplifica la estructura y la reutilización de componentes en una aplicación Vue.

Componentes, Vistas y Router

Aquí, hemos creado un componente de botón que muestra un contador, el cual se incrementa cuando hacemos clic sobre él

<script setup> let count = 0; const increment = () => { count++; };</script><template> <button @click="increment">{{ count }}</button></template>

Los Componentes:

• Un Componente es una parte reutilizable y autocontenida de una interfaz de usuario (UI) en una aplicación Vue 3.

Aquí, hemos creado una vista simple de inicio que utiliza el componente de botón.

<script setup> import ButtonComponent from './ButtonComponent.vue';</script><template> <div> <h1>Bienvenido a mi aplicación</h1> <ButtonComponent></ButtonComponent> </div></template>

Las Vistas:

• Una Vista es una página o sección de nuestra aplicación que consiste en uno o más componentes.

• Ayudan a organizar y estructurar la navegación en nuestra aplicación.

import { createRouter, createWebHistory } from 'vue-router';import Home from './views/Home.vue';import About from './views/About.vue';const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About },];const router = createRouter({ history: createWebHistory(), routes,});export default router;

Vue Router:

• El Vue Router permite la navegación entre diferentes 'vistas'.

• Define las rutas y asocia las 'vistas' a esas rutas para gestionar la navegación en la aplicación.

<ul> <li v-for="item in items">{{ item }}</li></ul><button @click="handleClick">Haz clic</button>

Interacción y Funcionalidad

<input v-model="userInput" placeholder="Escribe algo"><img :src="imageUrl" alt="Imagen dinámica">

Directivas:

• Las Directivas son atributos especiales que comienzan con "v-" y se utilizan para agregar funcionalidad reactiva a elementos del DOM.

• Actúan como instrucciones para el framework Vue.js y le dicen cómo debe comportarse un elemento del DOM en relación con los datos en el componente.

• Ejemplos de directivas comunes incluyen v-bind, v-model, v-for, v-if, y v-on.

Bindings:

• Los Bindings se refieren a la forma en que se establece una relación entre los datos en tu componente y el DOM.
• Permiten conectar o enlazar datos en el componente con los elementos del DOM. Esto significa que los cambios en los datos se reflejarán automáticamente en los elementos del DOM, y viceversa.

• Son una parte integral de cómo funcionan las directivas en Vue.js. Cuando usamos una directiva como v-bind o v-model, estamos creando un binding entre un valor en el componente y un atributo o propiedad en un elemento del DOM.

Comunicación entre Componentes, y Componentes y Vistas (padres/hijos):

• Los componentes pueden comunicarse entre sí a través de la emisión de 'eventos' personalizados. Por un lado, tenemos la emisión de eventos utilizando el método '$emit()'. Por otra parte, tenemos la escucha de eventos, utilizando la directiva 'v-on' o su atajo '@'.

• Los eventos permiten a los componentes hijos notificar a los componentes padres sobre cambios o eventos específicos.

• Además, las 'props' se utilizan para pasar datos desde un componente padre a un componente hijo.

Ciclos de Vida en Vue 3:

• Los componentes Vue tienen un ciclo de vida con ganchos ('hooks') que se ejecutan en momentos específicos durante su vida útil.

• Lifecyle hooks: 'onMounted', 'onUpdated', y 'onUnmounted '.

El Ecosistema de Vue 3

• Vitest: framework diseñado específicamente para aplicaciones de Vue.js. Facilita la escritura y ejecución de pruebas unitarias y de extremo a extremo para los componentes Vue 3. Ofrece una sintaxis clara y flexible para realizar pruebas con facilidad, y destaca por su rapidez.

• Vuetify: librería de componentes de IU que se integra con Vue.js. Proporciona una amplia variedad de componentes predefinidos y estilos que podemos utilizar para construir interfaces de usuario atractivas y coherentes de manera rápida, siguiendo los principios de diseño de Material Design de Google. Es altamente personalizable.

• Pinia: librería de gestión de estado (de almacenamiento) para Vue 3. Ofrece una forma eficiente y escalable de gestionar el estado (compartir un estado entre componentes/páginas) de la aplicación. Se basa en el sistema de reactividad de Vue 3, y proporciona herramientas para gestionar el estado global de manera sencilla y optimizada.