Vue Academy · Lección

Importación y uso de composables en script setup

Importación de composables, uso de composables de VueUse de terceros y organización de importaciones.

Importación y uso de composables en script setup es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 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.

Composables y script setup

Los composables son funciones que encapsulan lógica reactiva para reutilizarla. Con <script setup>, utilizarlos es tan sencillo como importarlos y llamarlos en el nivel superior.

Importar en el nivel superior

Llame siempre a un composable en el nivel superior de <script setup>, no dentro de una condición, un bucle ni una función anidada. Así se garantiza que Vue registre correctamente su reactividad y sus hooks del ciclo de vida.

<script setup>
import { useCounter } from './useCounter'
const { count, increment } = useCounter()
</script>

Por qué es importante el nivel superior

Los composables suelen registrar hooks del ciclo de vida, como onMounted, o configurar watchers. Estas operaciones deben ejecutarse durante la configuración del componente, lo que solo ocurre si llama al composable de forma síncrona en el nivel superior.

Desestructure lo que necesite

Un composable devuelve un objeto con valores reactivos y funciones. Desestructure únicamente lo que utilice el componente y cambie los nombres para evitar colisiones cuando llame dos veces al mismo composable.

<script setup>
import { useMouse } from './useMouse'
const { x: mouseX, y: mouseY } = useMouse()
</script>

Conozca VueUse

VueUse es una biblioteca popular de composables listos para usar. En lugar de escribir usted mismo la lógica habitual, importe un composable probado. Instálelo una vez e importe lo que necesite.

<script setup>
import { useLocalStorage } from '@vueuse/core'
const name = useLocalStorage('name', 'Alice')
</script>

useLocalStorage en acción

useLocalStorage devuelve un ref sincronizado con localStorage. Cambie el ref y se actualizará el almacenamiento del navegador; vuelva a cargar la página y el valor permanecerá.

<template>
  <input v-model="name" />
  <p>Saved: {{ name }}</p>
</template>

useMouse para coordenadas reactivas

useMouse rastrea la posición del puntero mediante refs reactivas. Añade y elimina el detector de eventos por usted, por lo que nunca tendrá que gestionar la limpieza manualmente.

<script setup>
import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()
</script>

<template>
  <p>{{ x }}, {{ y }}</p>
</template>

Los composables se combinan

Un composable puede llamar a otros composables. Esta composición por capas es el núcleo de la Composition API: cree piezas pequeñas y combínelas para formar funcionalidades más grandes.

import { useMouse } from '@vueuse/core'

export function useMouseDistance() {
  const { x, y } = useMouse()
  const distance = computed(() => Math.hypot(x.value, y.value))
  return { distance }
}

await de nivel superior

<script setup> admite await directamente en el nivel superior. El componente se convierte en una configuración asíncrona y el framework puede suspender el renderizado hasta que se resuelva la promesa.

<script setup>
const res = await fetch('/api/user')
const user = await res.json()
</script>

Suspense con configuración asíncrona

El componente que utiliza await de nivel superior debe estar envuelto por su componente padre en un límite <Suspense>. Suspense muestra contenido alternativo hasta que termina la configuración asíncrona.

<template>
  <Suspense>
    <AsyncUser />
    <template #fallback>Loading...</template>
  </Suspense>
</template>

Prácticas recomendadas

Nombre los composables con el prefijo use.
Llámelos únicamente en el nivel superior.
Devuelva refs (o un reactive envuelto en toRefs).
Prefiera VueUse para las necesidades habituales antes de escribir sus propios composables.

Comprobación rápida

Confirme que comprende los composables.

Resumen

Ha aprendido a utilizar composables:

Impórtelos y llámelos en el nivel superior de <script setup>.
Desestructure y cambie el nombre de lo que necesite.
VueUse ofrece composables listos para usar, como useLocalStorage y useMouse.
El await de nivel superior convierte la configuración en asíncrona y se combina con <Suspense>.

Preguntas frecuentes

¿La lección «Importación y uso de composables en script setup» es gratis?

Sí — el texto completo de «Importación y uso de composables en script setup» 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 «Importación y uso de composables en script setup»?

Importación de composables, uso de composables de VueUse de terceros y organización de importaciones. 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 4 de 4.

¿Cuánto tiempo toma la lección «Importación y uso de composables en script setup»?

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

Introducción a script setup
defineProps y defineEmits
defineExpose y useAttrs
Importación y uso de composables en script setup

← Volver a Vue Academy