Composables : fonctions de composition réutilisables
Extrayez la logique réactive dans des fonctions composables préfixées par use, partagez-les entre les composants et comprenez en quoi elles diffèrent des mixins.
Composables : fonctions de composition réutilisables est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Que sont les composables ?
Un composable est une fonction qui utilise les hooks de l'API de composition pour encapsuler et réutiliser une logique avec état. C'est l'équivalent des mixins dans l'API de composition, mais sans collisions de noms ni dépendances cachées.
Un composable élémentaire
Extrayez la logique réactive dans une fonction commençant par use. Elle peut utiliser ref, computed, watch et les hooks de cycle de vie, comme setup().
// useCounter.ts
import { ref } from 'vue';
export function useCounter(initial = 0) {
const count = ref(initial);
const increment = () => count.value++;
const decrement = () => count.value--;
const reset = () => (count.value = initial);
return { count, increment, decrement, reset };
}
// Usage in any component:
const { count, increment } = useCounter(10);Un composable avec des hooks de cycle de vie
Les composables peuvent enregistrer des hooks de cycle de vie. Ces hooks se déclenchent par rapport au composant qui appelle le composable.
// useOnlineStatus.ts
import { ref, onMounted, onUnmounted } from 'vue';
export function useOnlineStatus() {
const isOnline = ref(navigator.onLine);
const update = () => (isOnline.value = navigator.onLine);
onMounted(() => {
window.addEventListener('online', update);
window.addEventListener('offline', update);
});
onUnmounted(() => {
window.removeEventListener('online', update);
window.removeEventListener('offline', update);
});
return { isOnline };
}Un composable asynchrone (useFetch)
Les composables sont particulièrement adaptés à la récupération asynchrone de données : ils encapsulent le schéma chargement/erreur/données.
// useFetch.ts
export function useFetch<T>(url: MaybeRef<string>) {
const data = ref<T | null>(null);
const loading = ref(true);
const error = ref<string | null>(null);
watchEffect(async (onCleanup) => {
const controller = new AbortController();
onCleanup(() => controller.abort());
loading.value = true;
error.value = null;
try {
const res = await fetch(unref(url), { signal: controller.signal });
data.value = await res.json();
} catch (e: any) {
if (e.name !== 'AbortError') error.value = e.message;
} finally { loading.value = false; }
});
return { data, loading, error };
}Accepter des refs comme paramètres
Les composables peuvent accepter comme arguments des valeurs simples ou des refs grâce à MaybeRef<T> (= T | Ref<T>) et à unref() pour accéder à la valeur.
import type { MaybeRef } from 'vue';
import { unref } from 'vue';
function useDouble(num: MaybeRef<number>) {
return computed(() => unref(num) * 2);
}Composables et mixins
Les mixins injectent des propriétés dans le composant sans en indiquer clairement l'origine. Les composables sont explicites : leur valeur de retour montre exactement ce qu'ils fournissent. Vous pouvez utiliser plusieurs composables sans conflits de noms.
Partager l'état entre les composants
Si un composable appelle ref() en son sein, chaque composant qui l'appelle obtient son propre état. Pour partager l'état entre les composants, appelez ref() au niveau du module (en dehors de la fonction du composable).
// Shared state (module-level):
const sharedCount = ref(0);
export function useSharedCounter() {
// All callers share the same sharedCount
return { count: sharedCount, increment: () => sharedCount.value++ };
}Bibliothèques de composables
VueUse (vueuse.org) fournit plus de 200 composables prêts à l'emploi : useLocalStorage, useFetch, useDark, useIntersectionObserver et bien d'autres. Consultez toujours VueUse avant de tout réécrire.
Tester les composables
Testez les composables en les appelant dans un petit composant de test ou en utilisant le modèle mountedApp de @vue/test-utils. Vitest s'intègre bien au système de réactivité de Vue.
Conventions de nommage des composables
Ajoutez toujours le préfixe use (useAuth, useFetch, useMediaQuery). Concentrez chaque composable sur une seule responsabilité. Évitez ceux qui effectuent trop de tâches sans rapport entre elles.
Organisation des composables
Créez un dossier composables/. Utilisez un fichier par composable. Un fichier d'index réexporte tous les composables. Cette organisation reprend celle des hooks personnalisés dans les projets React.
Vérification rapide
Quel est le principal avantage des composables par rapport aux mixins de Vue ?
Récapitulatif : les composables Vue
Un composable est une fonction préfixée par use qui appelle des hooks de l'API de composition. Chaque appelant obtient un état indépendant, sauf si vous utilisez des refs au niveau du module. Acceptez des refs ou des valeurs avec MaybeRef + unref. Enregistrez les hooks de cycle de vie dans les composables. Consultez VueUse avant d'écrire les vôtres. Des valeurs de retour explicites évitent la pollution de l'espace de noms propre aux mixins.
Questions Fréquemment Posées
La leçon « Composables : fonctions de composition réutilisables » est-elle gratuite ?
Oui — le texte complet de « Composables : fonctions de composition réutilisables » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Composables : fonctions de composition réutilisables » ?
Extrayez la logique réactive dans des fonctions composables préfixées par use, partagez-les entre les composants et comprenez en quoi elles diffèrent des mixins. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Composables : fonctions de composition réutilisables » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- ref() et reactive()
- computed() et watch()
- La fonction setup() et script setup
- Composables : fonctions de composition réutilisables