0Pricing
Vue Academy · Lección

VueUse: La biblioteca de composables

useLocalStorage, useMouse, useWindowSize, useIntersectionObserver: composables prácticos de VueUse

VueUse: La biblioteca de composables 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.

Qué es VueUse

VueUse (@vueuse/core) es una amplia colección de composables listos para usar en tareas comunes: almacenamiento, sensores, API del navegador y mucho más. Le evita tener que reinventarlos.

npm install @vueuse/core

useLocalStorage para la persistencia

useLocalStorage devuelve una ref sincronizada con localStorage. Los cambios persisten automáticamente después de recargar la página y la serialización se gestiona por usted.

import { useLocalStorage } from "@vueuse/core";
const name = useLocalStorage("name", "Guest");
// name.value persists in localStorage

Reactivo y persistente

La ref devuelta se comporta como cualquier otra: vincúlela con v-model. Sin embargo, su valor sobrevive a las actualizaciones de la página porque VueUse escribe directamente en el almacenamiento.

<input v-model="name" />

useMouse para la posición del cursor

useMouse rastrea el puntero y devuelve refs reactivas x e y que se actualizan a medida que se mueve el cursor.

import { useMouse } from "@vueuse/core";
const { x, y } = useMouse();

Mostrar las coordenadas del ratón

Vincule las refs en la plantilla; se actualizarán con cada evento mousemove sin que tenga que configurar listeners.

<p>Cursor: {{ x }}, {{ y }}</p>

useWindowSize para las dimensiones

useWindowSize proporciona refs reactivas width y height, que se actualizan al cambiar el tamaño de la ventana. Es ideal para la lógica adaptable en el script.

import { useWindowSize } from "@vueuse/core";
const { width, height } = useWindowSize();

Lógica adaptable

Combine el tamaño de la ventana con un valor calculado para controlar las decisiones de diseño de forma reactiva.

import { computed } from "vue";
const isMobile = computed(() => width.value < 768);

useIntersectionObserver para la carga diferida

useIntersectionObserver indica cuándo un elemento entra en la ventana gráfica, lo que constituye la base para cargar imágenes de forma diferida o implementar un desplazamiento infinito.

import { useIntersectionObserver } from "@vueuse/core";
const target = ref(null);

Activar según la visibilidad

Pase una ref de plantilla y un callback que se ejecute con las entradas de intersección. Cargue la imagen u obtenga más datos cuando el objetivo sea visible.

useIntersectionObserver(target, ([entry]) => {
  if (entry.isIntersecting) loadImage();
});

Limpieza automática

Una gran ventaja es que los composables de VueUse registran y eliminan sus propios listeners y observadores al desmontarse. Obtiene una limpieza correcta sin esfuerzo adicional.

Por qué usar VueUse

Es compatible con tree-shaking, está bien probado y prioriza TypeScript. Para necesidades comunes como almacenamiento, sensores, red o tiempo, recurra a VueUse antes de escribir su propio composable.

Comprobación rápida

¿Qué composable de VueUse persiste una ref en localStorage?

Resumen

Ha recorrido VueUse: useLocalStorage (estado persistente), useMouse (posición del cursor), useWindowSize (dimensiones reactivas) y useIntersectionObserver (activador de carga diferida), todos con limpieza automática y tree-shaking.

Preguntas frecuentes

¿La lección «VueUse: La biblioteca de composables» es gratis?

Sí — el texto completo de «VueUse: La biblioteca de composables» 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 «VueUse: La biblioteca de composables»?

useLocalStorage, useMouse, useWindowSize, useIntersectionObserver: composables prácticos de VueUse 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 «VueUse: La biblioteca de composables»?

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