Qu'est-ce qu'un composable et comment en écrire un ?

Question

Qu'est-ce qu'un composable et comment en écrire un ?

Accepted Answer

Un **composable** est une fonction réutilisable qui encapsule **une logique avec état** en utilisant l'API de composition. Par convention, il est nommé `useXxx` et retourne un état réactif plus des fonctions — vous permettant de partager la logique entre composants sans mixins ni répétition. ## Écrire un composable ```js // composables/useCounter.js import { ref, computed } from "vue"; export function useCounter(initial = 0) { const count = ref(initial); // encapsulated reactive state const double = computed(() => count.value * 2); function increment() { count.value++; } function reset() { count.value = initial; } return { count, double, increment, reset }; // expose the API } ``` ## L'utiliser dans n'importe quel composant ```vue ``` Chaque composant qui appelle `useCounter()` obtient son propre `count` **isolé** — les composables créent un état frais à chaque appel, contrairement à une variable partagée au niveau du module. ## Un exemple réaliste : useFetch avec lifecycle ```js import { ref, onUnmounted } from "vue"; export function useMousePosition() { const x = ref(0), y = ref(0); const update = (e) => { x.value = e.pageX; y.value = e.pageY; }; window.addEventListener("mousemove", update); // set up onUnmounted(() => window.removeEventListener("mousemove", update)); // auto cleanup! return { x, y }; } ``` Les composables peuvent utiliser les lifecycle hooks, les watchers et d'autres composables — et surtout, ils **encapsulent leur propre nettoyage** (`onUnmounted`), donc les consommateurs n'ont pas à s'en souvenir. ## Composables vs mixins (l'ancienne façon) ```text Mixins (Vue 2): merged into the component — unclear where properties came from, naming collisions between mixins, implicit dependencies Composables: explicit imports + return values — clear sources, no collisions, can be composed, fully typed in TypeScript ``` ## Pourquoi c'est important Les composables sont *la* façon idiomatique d'extraire et réutiliser une logique avec état dans Vue 3 — récupération de données, gestion de formulaires, suivi de souris/scroll, debouncing, etc. Ils résolvent proprement le problème de réutilisation de logique (explicite, sans collision, composable, compatible avec TypeScript) là où les mixins de Vue 2 ont échoué. Ils sont la raison principale pour laquelle les équipes adoptent l'API de composition : la logique partagée devient une simple fonction testable plutôt que du code éparpillé ou dupliqué.