Caractéristiques d’un bon composable
Convention de nommage (useName), encapsulation de l’état réactif, renvoi de références plutôt que de valeurs brutes.
Caractéristiques d’un bon composable est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 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 Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Qu’est-ce qu’une fonction composable
Une fonction composable utilise l’API de composition de Vue pour encapsuler et réutiliser une logique avec état. C’est la réponse de Vue 3 aux mixins : une approche plus claire, explicite et adaptée au typage.
La convention du préfixe use
Par convention, les composables sont nommés avec le préfixe use : useCounter, useFetch, useMouse. Cela indique immédiatement que la fonction contient une logique réactive.
function useDarkMode() { /* ... */ }
function usePagination() { /* ... */ }Retourner des références réactives, pas des valeurs brutes
Renvoyez des références réactives (ou un état réactif) afin que les composants appelants restent réactifs lorsqu'ils déstructurent le résultat. Renvoyer count.value fournirait un instantané qui ne se mettrait jamais à jour.
function useCounter() {
const count = ref(0);
return { count }; // return the ref itself
}Déstructuration sans risque
Comme vous renvoyez des références réactives, le composant appelant peut déstructurer librement sans perdre la réactivité. Chaque référence conserve sa propre connexion réactive.
const { count } = useCounter();
// count stays reactive after destructuringResponsabilité unique
Un bon composable ne fait qu'une seule chose. useFetch récupère les données ; useLocalStorage les rend persistantes. Les composables ciblés et de petite taille s'assemblent proprement pour créer des fonctionnalités plus importantes.
Composer des composables
Les composables peuvent appeler d'autres composables et construire une logique par couches. Un composable useUserProfile peut utiliser useFetch en interne.
function useUserProfile(id) {
const { data } = useFetch("/users/" + id);
return { user: data };
}Nettoyer les effets secondaires
Si un composable ajoute des écouteurs, des minuteurs ou des abonnements, il doit les supprimer dans onUnmounted afin d'éviter les fuites mémoire.
import { onMounted, onUnmounted } from "vue";
onMounted(() => window.addEventListener("resize", onResize));
onUnmounted(() => window.removeEventListener("resize", onResize));Accepter des arguments réactifs
Les composables peuvent accepter des références ou des accesseurs comme entrées et réagir à leurs changements avec watch ou watchEffect, ce qui les rend flexibles.
function useDouble(source) {
return computed(() => unref(source) * 2);
}Éviter les conflits de noms
Lorsqu'un composable renvoie de nombreuses valeurs, exposez des noms explicites. Si deux composables renvoient data, renommez-les lors de la déstructuration pour éviter les conflits.
const { data: user } = useFetch("/user");
const { data: posts } = useFetch("/posts");Respecter les conventions de Vue
Appelez les composables de façon synchrone au niveau supérieur de setup (ou d'un autre composable), et non dans des blocs conditionnels ou des rappels asynchrones, afin que les fonctions du cycle de vie s'enregistrent correctement.
// good: top-level
const { count } = useCounter();
// avoid: inside if-blocks or after awaitDocumentation et structure de retour
Renvoyez un objet prévisible afin que les composants appelants sachent ce qu'ils obtiennent. Une structure cohérente (état et méthodes) rend les composables faciles à apprendre et à utiliser.
return { count, increment, decrement, reset };Vérification rapide
Pourquoi un composable doit-il renvoyer des références réactives plutôt que des valeurs brutes ?
Récapitulatif
Vous avez appris les caractéristiques d'un bon composable : le préfixe use, le renvoi de références réactives pour une déstructuration sans risque, la responsabilité unique, le nettoyage des effets secondaires dans onUnmounted et l'absence de conflits de noms dans l'objet renvoyé.
Questions Fréquemment Posées
La leçon « Caractéristiques d’un bon composable » est-elle gratuite ?
Oui — le texte complet de « Caractéristiques d’un bon composable » 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 Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Caractéristiques d’un bon composable » ?
Convention de nommage (useName), encapsulation de l’état réactif, renvoi de références plutôt que de valeurs brutes. Tu pratiques Vue 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 Vue Academy ?
Aucune expérience préalable n'est requise. Vue 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 1 sur 4.
Combien de temps prend la leçon « Caractéristiques d’un bon composable » ?
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 Vue Academy ?
Oui. Chaque leçon Vue 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
- Caractéristiques d’un bon composable
- useCounter : un composable simple
- useFetch : un composable de données asynchrones
- VueUse : la bibliothèque de composables