0Pricing
Vue Academy · Lección

Qué caracteriza a un buen composable

Convención de nombres (useName), encapsulación del estado reactivo y devolución de refs en lugar de valores sin envolver.

Qué caracteriza a un buen composable es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Qué es un composable

Un composable es una función que utiliza la Composition API de Vue para encapsular y reutilizar lógica con estado. Es la respuesta de Vue 3 a los mixins: más limpia, explícita y compatible con los tipos.

La convención del prefijo use

Por convención, los composables se nombran con el prefijo use: useCounter, useFetch, useMouse. Esto indica de inmediato que la función contiene lógica reactiva.

function useDarkMode() { /* ... */ }
function usePagination() { /* ... */ }

Devuelva refs, no valores sin procesar

Devuelva refs (o estado reactivo) para que los consumidores mantengan la reactividad al desestructurar. Devolver count.value entregaría una instantánea que nunca se actualiza.

function useCounter() {
  const count = ref(0);
  return { count }; // return the ref itself
}

Desestructuración segura

Como devuelve refs, el consumidor puede desestructurarlas libremente sin perder la reactividad. Cada ref conserva su propia conexión reactiva.

const { count } = useCounter();
// count stays reactive after destructuring

Responsabilidad única

Un buen composable hace una sola cosa. useFetch obtiene datos; useLocalStorage los persiste. Los composables pequeños y enfocados se combinan limpiamente para crear funcionalidades más grandes.

Composición de composables

Los composables pueden llamar a otros composables para crear una lógica por capas. Por ejemplo, useUserProfile podría usar useFetch internamente.

function useUserProfile(id) {
  const { data } = useFetch("/users/" + id);
  return { user: data };
}

Limpieza de efectos secundarios

Si un composable agrega listeners, temporizadores o suscripciones, debe eliminarlos en onUnmounted para evitar fugas de memoria.

import { onMounted, onUnmounted } from "vue";
onMounted(() => window.addEventListener("resize", onResize));
onUnmounted(() => window.removeEventListener("resize", onResize));

Acepte argumentos reactivos

Los composables pueden aceptar refs o getters como entradas y reaccionar a ellas con watch o watchEffect, lo que los hace flexibles.

function useDouble(source) {
  return computed(() => unref(source) * 2);
}

Evite conflictos de nombres

Cuando un composable devuelve muchos valores, exponga nombres claros. Si dos composables devuelven data, cambie su nombre al desestructurar para evitar conflictos.

const { data: user } = useFetch("/user");
const { data: posts } = useFetch("/posts");

Mantenga el estilo idiomático del framework

Llame a los composables de forma síncrona en el nivel superior de setup (o de otro composable), no dentro de condicionales ni callbacks asíncronos, para que los hooks del ciclo de vida se registren correctamente.

// good: top-level
const { count } = useCounter();
// avoid: inside if-blocks or after await

Documentación y estructura de retorno

Devuelva un objeto predecible para que los consumidores sepan qué reciben. Una estructura coherente (estado más métodos) facilita aprender a usar los composables.

return { count, increment, decrement, reset };

Comprobación rápida

¿Por qué debería devolver refs un composable en lugar de valores sin procesar?

Resumen

Ha aprendido las características de un buen composable: el prefijo use, devolver refs para desestructurar de forma segura, la responsabilidad única, limpiar los efectos secundarios en onUnmounted y evitar conflictos de nombres en el objeto devuelto.

Preguntas frecuentes

¿La lección «Qué caracteriza a un buen composable» es gratis?

Sí — el texto completo de «Qué caracteriza a un buen composable» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Qué caracteriza a un buen composable»?

Convención de nombres (useName), encapsulación del estado reactivo y devolución de refs en lugar de valores sin envolver. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Qué caracteriza a un buen composable»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Qué caracteriza a un buen composable
  2. useCounter: Un composable sencillo
  3. useFetch: Un composable para datos asíncronos
  4. VueUse: La biblioteca de composables
← Volver a Vue Academy