Exercices Composables
10 exercices pour maîtriser la réutilisation de logique avec les composables Vue 3.
useToggle — toggle boolean avec ref
Tâche : Créez un composable useToggle(valeurInitiale) qui retourne { valeur, basculer, activer, desactiver }. valeur est une ref booléenne.
useLocalStorage — sauvegarder/restaurer une ref
Tâche : Créez useLocalStorage(key, valeurDefaut). La ref est initialisée depuis localStorage. Un watch sauvegarde automatiquement à chaque changement.
useFetch — fetch avec loading/error
Tâche : Créez useFetch(url) qui retourne { data, loading, error }. loading est true pendant le fetch, error contient le message d'erreur si le fetch échoue.
useDebounce — valeur débouncée
Tâche : Créez useDebounce(source, delai). La ref retournée ne se met à jour qu'après delai ms d'inactivité (utiliser setTimeout + clearTimeout).
useWindowSize — largeur/hauteur réactives
Tâche : Créez useWindowSize() qui retourne { width, height } — deux refs initialisées avec window.innerWidth/innerHeight et mises à jour à chaque resize.
useKeyPress — détecter une touche clavier
Tâche : Créez useKeyPress(touche) qui retourne { appuyee, derniereTouche }. appuyee est true quand la touche est enfoncée. Nettoyer les listeners dans onUnmounted.
useClickOutside — clic hors d'un élément
Tâche : Créez useClickOutside(elementRef, callback). La callback est appelée quand l'utilisateur clique en dehors de l'élément référencé. Nettoyer dans onUnmounted.
useInterval — setInterval avec cleanup
Tâche : Créez useInterval(callback, delai) qui démarre un setInterval dans onMounted et le stoppe avec clearInterval dans onUnmounted.
Bibliothèque de 2+ composables utilisés ensemble
Tâche : Créez au moins 2 composables (useToggle et useLocalStorage) et utilisez-les ensemble dans un composant setup(). Le résultat doit être fonctionnel.
useSearch avancé — filtrage + debounce + loading
Tâche : Créez useSearch(items, options) avec filtrage sur des champs, debounce de 300ms et état loading. Retourner { query, loading, resultats, nbResultats }.
Passer le QCM V09