Introducción a
Composition API

¿Qué es?

• Nueva forma de componer componentes en Vue, centrándose en agrupar y reutilizar lógica relacionada.
   
• Sintaxis aditiva, pudiendo usarse Options API y Composition API a la vez, incluso en un mismo componente.
   
• Enfocada a componentes medianos y grandes. También si buscar sacar el mayor partido a TypeScript.

Show me the code 🔥

Setup function

• Donde escribimos la lógica del componente a través de la API de Composición.
   
• No tiene acceso a this pero lo obtiene del objeto context (como en Nuxt).
   
• El primer argumento de setup es props, que es reactivo y puede ser observado, el segundo es context, contiene todo lo que antes se podía acceder desde this.

Active refs.

• Para crear una referencia reactiva (lo que en la Options API hacemos con data) debemos importar la función ref.
   
• Esta envuelve un valor en un Proxy y nos permite llevar un control de sus cambios.
   
• Para acceder y/o mutar el valor de una referencia reactiva, debemos usar la propiedad .value para no perder la reactividad.

Lifecycle hooks

• Nuevas denominaciones de eventos.
   
• Prefijados por "on" (ej: onMounted).
   
• Los hooks beforeCreate y created ya no son necesarios.
   
• Se deben importar dentro de la función setup.

Methods

• Podemos declarar funciones dentro del método setup y luego exponerlas junto con el resto de propiedades.
   
• Dentro de estas funciones/métodos nos podemos referir al valor de las referencias reactivas a través de value.
   
• Sin embargo, no hace falta especificar la propiedad value dentro de la plantilla. 

Composition API & Vuex

• No tenemos acceso a los helpers (mapState, mapMutations, etc).
   
• Pero sí tenemos la función useStore que podemos importar desde setup.
   
• Con useStore podemos crear "a mano" getters a través de propieades computadas.
   
• También podemos acceder a las mutaciones y acciones con commit y dispatch respectivamente.

Computed props.

• Debemos incorporar la función computed y envolver con ella otra función con ella que haga uso de referencias reactivas (ref).
   
• Por supuesto, también debemos exponer la propiedad computada desde el método setup.

Logic extraction

• La Composition API facilita la extracción y reutilización  de lógica entre componentes.
   
• Como podemos acceder a la reactividad fuera de un componente, crear funciones externas es algo muy común.
   
• Incluso hay librerías especiales de composables listas para utilizar.

Reactive syntax

• Podemos crear objetos con valores reactivos usando la función reactive.
   
• Dentro de un objeto reactivo no tenemos que utilizar la propiedad value para modificar su valor.
   
• Con la función toRefs convertimos un objeto reactivo en un objeto plano, donde cada propiedad es una referencia reactiva.

Watchers

• Aparte del clásico watch, Vue 3 incorpora watchEffect, que y controla todas las dependencias reactivas.
   
• A diferencia de watch (lazy loaded), watchEffect se ejecuta en el siguiente ciclo disponible.
   
• Aun así podemos lanzar watch inmediatamente con la opción { immediate: true }.

Composition API & Vue Router

• Al no tener acceso a this dentro de setup, debemos importar los helpers desde vue-router.
   
• Si importamos useRouter podremos acceder a todas las propiedades de Vue Router, navegar de forma programática, etc.
   
• Con useRoute podemos consultar y manipular toda la información de la ruta actual.

Moraleja...

• Si quieres usar Vue 3, aprender a usar la Composition API NO es una opción. Hazlo cuanto antes 😉
   
• Es especialmente útil en componentes medianos o grandes, que además contengan lógica de diferentes funciones.
   
• El patrón de crear funciones compositoras es extremadamente potente y un game changer respecto a Vue 2.

Gracias