Ciclos de Vida en Composition API de Vue.js

¿Cómo trabajan los ciclos de vida en Vue.js con Composition API?

El manejo de los ciclos de vida en Vue.js ha evolucionado con la introducción del Composition API, cambiando la manera en que definimos y utilizamos estos ciclos en comparación con el Options API. En el Composition API, trabajamos directamente con funciones que nos permiten acceder a módulos internos de Vue, lo que mejora la modularidad y funcionalidad de nuestras aplicaciones.

¿Qué es la función setup?

En el contexto del Composition API, la función setup es fundamental. Aquí es donde se inicializan el estado reactivoo, los métodos y se reúnen los hooks del ciclo de vida que reemplazan los métodos como created o beforeCreate. En el setup, ya se tiene acceso a la información reactiva, sin embargo, el DOM aún no está montado en el navegador. Esto significa que tareas como el fetch de datos deben realizarse aquí, asegurando que la aplicación obtenga los datos en una etapa temprana.

setup() {
  // Lógica de fetch aquí
}

¿Cómo funcionan los hooks de ciclo de vida personalizados?

A diferencia del Options API, donde los ciclos de vida están predefinidos, el Composition API utiliza funciones específicas para cada hook, que siguen el patrón on+nombreDelCiclo, como onMounted o onUpdated. Estas funciones nos permiten implementar acciones específicas en fases concretas del ciclo de vida de un componente.

Por ejemplo, para ejecutar código después de montar el componente, usamos onMounted.

import { onMounted } from 'vue';

setup() {
  onMounted(() => {
    console.log('Componente montado');
    // Acciones a realizar después del montaje
  });
}

¿Cuándo usar created, mounted o updated?

La elección del hook de ciclo de vida adecuado es crucial dependiendo del caso de uso:

• Created: Excelente para obtener datos de una API, pues permite trabajar con datos reactivos antes de que el componente esté completamente montado.
• Mounted: Ideal para la manipulación del DOM, ya que asegura que todos los elementos están disponibles en el navegador.
• Updated: Útil para reaccionar a cambios de datos que requieran que el DOM se refresque.

Desafío: Filtrar una lista de productos en Vue.js

Ahora que conocemos los conceptos básicos del Composition API y los hooks de ciclo de vida, te desafiamos a aplicar este conocimiento en un reto práctico: Filtrar una lista de productos basada en el input del usuario.

¿Cómo abordar el desafío?

• Crear un input: Permite al usuario introducir el valor para filtrar.
• Capturar eventos: Usa eventos en Vue.js para detectar cuando el usuario presiona una tecla específica, como 'Enter'.
• Propiedades computadas: Recalcula una propiedad computada para actualizar dinámicamente la lista de productos basada en la entrada del usuario.

Este ejercicio no solo consolidará tus conocimientos sobre las propiedades reactivas, sino que también te ayudará a comprender mejor cómo manipular eventos y estados en Vue.js. ¡Te animamos a aceptar el reto y descubrir las posibilidades del desarrollo con Vue!