Mik azok a composable-ok és hogyan írunk egyet?

Question

Mik azok a composable-ok és hogyan írunk egyet?

Accepted Answer

A **composable** egy újrafelhasználható függvény, amely az **állapotkezelő logikát** a Composition API segítségével zárja be. Konvenció szerint `useXxx` névre keresztelik, és reaktív állapotot valamint függvényeket ad vissza — lehetővé téve, hogy a logikát a komponensek között osztozzatok mixinek vagy ismétlődés nélkül. ## Composable írása ```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 } ``` ## Használata bármely komponensben ```vue ``` Minden komponens, amely meghívja a `useCounter()` függvényt, a sajátját kapja **elszigetelt** `count` — a composable-ok minden híváskor friss állapotot hoznak létre, nem pedig egy megosztott modul-szintű változóhoz hasonlóan. ## Egy valós példa: useFetch lifecycle-el ```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 }; } ``` A composable-ok használhatnak lifecycle hook-okat, watcher-eket és más composable-okat — és döntően **saját tisztítást encapsulálnak** (`onUnmounted`), így a fogyasztóknak nem kell erre emlékezniük. ## Composable-ok és mixinek összehasonlítása (a régi módszer) ```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 ``` ## Miért fontos A composable-ok az *egyetlen* idiomatikus módja az állapotkezelő logika kivonásának és újrafelhasználásának a Vue 3-ban — adatletöltés, űrlapkezelés, egér-/görgetés-követés, debouncing stb. Clean megoldást nyújtanak a logika-újrafelhasználás problémájára (explicit, ütközésmentes, komponálható, TypeScript-barát), ahol a Vue 2 mixinek kudarc voltak. Az Composition API-t elfogadó csapatok elsődleges oka: a megosztott logika egyszerű, tesztelhető függvénnyé válik szétszórt vagy duplikált kód helyett.