Ciclos de vida en Composition API

Comprende con claridad cómo funciona el ciclo de vida en Composition API y cuándo usar funciones internas como setup, onMounted y onUpdated para cargar datos, manipular el DOM y optimizar la lógica con propiedades computadas. Aquí encontrarás ejemplos prácticos con reactividad y buenas prácticas para que tu componente de View sea claro y eficiente.

¿Cómo cambia el ciclo de vida en Composition API frente a Options API?

A diferencia del Options API, en Composition API no declaras opciones como created, beforeCreate o mounted. Todo parte de una sola función: setup. Lo que escribas dentro de setup ocurre en el equivalente a created/beforeCreate: ya hay información reactiva disponible, pero el DOM aún no está montado.

• setup equivale a created/beforeCreate: lógica inicial y acceso a datos reactivos.
• DOM no disponible en setup: evita depender de elementos montados.
• Funciones internas con prefijo on: onBeforeMount, onMounted, onUpdated, etc., para responder a cada etapa.

¿Qué hacer en setup, onMounted y updated para cada caso?

Elegir el momento adecuado evita errores y hace tu componente más simple. Usa setup para cargar datos, onMounted para trabajar con el DOM, y onUpdated para reaccionar a cambios ya reflejados en la interfaz.

¿Cómo cargar datos con fetch en setup?

En setup puedes realizar un fetch a una API y poblar una referencia reactiva. Primero vacía la lista y luego asigna los datos recibidos a su .value.

<script setup>
import { ref, onMounted } from 'vue'

const productos = ref([])

// Carga inicial: ocurre en el ciclo equivalente a created/beforeCreate.
fetch('URL_DE_TU_API')
  .then(res => res.json())
  .then(data => {
    productos.value = []           // vaciar referencia.
    productos.value = data         // asignar datos de la API.
  })
  .catch(err => console.error(err))

// Acceso a productos en la vista se hará de forma reactiva.
</script>

¿Qué realizar después del montaje con onMounted?

Cuando el componente ya se montó en el navegador, puedes interactuar con el DOM o ejecutar tareas que requieren elementos presentes.

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log('mounted: componente listo en el navegador')
  // Aquí podrías medir nodos, enfocar inputs o integrar librerías del DOM.
})
</script>

¿Cuándo elegir updated?

• Cuando necesitas ejecutar lógica después de que un cambio reactivo ya impactó el DOM.
• Úsalo con moderación: puede dispararse muchas veces.

¿Cómo aplicar propiedades computadas para filtrar productos?

Propón un reto con reactividad: crear un input que capture lo que escribe el usuario y, con una propiedad computada, filtrar la lista de productos sin mutar el original. Así aprovechas referencias reactivas, eventos del teclado y computed.

<template>
  <input
    type="text"
    placeholder="Buscar producto..."
    @input="consulta = $event.target.value"
  />

  <ul>
    <li v-for="p in productosFiltrados" :key="p.id">
      {{ p.nombre }} - {{ p.precio }}
    </li>
  </ul>
</template>

<script setup>
import { ref, computed } from 'vue'

const productos = ref([])       // se llena con la API en setup.
const consulta = ref('')        // texto que escribe el usuario.

const productosFiltrados = computed(() => {
  const q = consulta.value.trim().toLowerCase()
  if (!q) return productos.value
  return productos.value.filter(p =>
    String(p.nombre || '').toLowerCase().includes(q)
  )
})
</script>

Puntos clave que refuerzan habilidades prácticas:

• Reactividad con referencias: usa ref y accede con .value.
• Propiedades computadas: recalculan vistas derivadas sin duplicar estado.
• Eventos del teclado: captura @input (o @keyup) para actualizar la búsqueda.
• Ciclos de vida con funciones internas: setup para datos, onMounted para DOM, onUpdated para post-actualizaciones.
• Trabajo con API y JSON: convierte respuesta a JSON y asigna a tu estado reactivo.

¿Tienes una solución distinta para el filtrado o un caso especial con mounted/updated? Cuéntalo en los comentarios y comparte tu enfoque.