Uso de Composition API en Vue.js 3

¿Qué es Composition API en Vue.js?

El mundo del desarrollo web está en constante evolución, y Vue.js no es la excepción. Con la llegada de Vue.js 3, los desarrolladores tienen una nueva herramienta a su disposición: la Composition API. Pero, ¿qué es exactamente la Composition API y por qué es relevante para los desarrolladores?

La Composition API ofrece una nueva manera de escribir componentes más organizados y estructurados, especialmente para aquellos que son extensos y complejos. A diferencia del enfoque tradicional usando el Options API (basado en un object literal), la Composition API permite trabajar directamente con funciones y obtener un código más legible y mantenible.

¿Cómo se diferencia de Options API?

Antes de la versión 3 de Vue.js, la estructura de los componentes se basaba en un JSON de configuración. Este JSON contenía métodos, funciones y propiedades computadas, entre otras características. Aunque efectivo, este enfoque a veces podía resultar en código desorganizado, especialmente en componentes extensos.

Por otro lado, la Composition API no reemplaza a la Options API, pero provee una alternativa funcional y reactiva. Mantiene los mismos conceptos subyacentes pero organiza el código de una forma diferente. Las funciones son el núcleo de este sistema, facilitando la organización y flexibilidad en el manejo de estructuras de datos y lógica.

¿Cómo empezar con la función setup?

La función setup es el corazón de la Composition API. Se comporta como un hook de ciclo de vida, similar a created, mounted, o unmounted, pero es el primer hook que se ejecuta. Este anticipado inicio permite preparar y configurar los datos antes de cualquier otro evento del ciclo de vida.

Uso de la función setup

La setup recibe dos argumentos: los props del componente y el contexto del componente. Estos son esenciales para interactuar con las propiedades y funcionalidades del componente, como el emit.

A continuación, se presenta un ejemplo simple de cómo definir la función setup:

import { ref } from 'vue';

export default {
  setup(props, context) {
    const repositorios = ref([]);
    
    // Funciones y lógica adicional

    return {
      repositorios
    };
  }
}

¿Qué retorna setup?

La clave de la setup es lo que retorna. Todo lo que se declara en el retorno estará disponible en el scope del componente, accesible tanto para métodos adicionales como para el template.

• Variables: Cualquier variable que sea necesaria en el template o en otras funciones.
• Funciones: Métodos que realicen operaciones o lógica significativa en el componente.

¿Por qué adoptar Composition API?

Existen varias razones para considerar la transición hacia la Composition API:

• Modularidad y organización: Permite agrupar funciones y variables de acuerdo con su lógica funcional en lugar de su tipo de definición.
• Reutilización de código: La capacidad de crear composables – funciones reutilizables que pueden compartirse entre componentes.
• Claridad: Mejora la claridad y comprensión del componente separando la definición lógica del layout visual.

La Composition API es una herramienta poderosa en el arsenal de Vue.js. Ofrece un enfoque diferente que, sumado a las funcionalidades de la Options API, proporciona una gran flexibilidad a los desarrolladores para estructurar mejor sus aplicaciones. Con su adoptación, los desarrolladores no solo crean código más eficiente sino también más claro y manejable. Así que, si buscas mejorar tus proyectos, sumérgete en la Composition API y descubre sus ventajas.