Τι είναι composables και πώς γράφετε έναν;

Question

Τι είναι composables και πώς γράφετε έναν;

Accepted Answer

Ένα **composable** είναι μια επαναχρησιμοποιήσιμη συνάρτηση που ενσωματώνει **stateful logic** χρησιμοποιώντας το Composition API. Κατά σύμβαση, ονομάζεται `useXxx` και επιστρέφει reactive state συν συναρτήσεις — επιτρέποντάς σας να μοιράζεστε logic σε components χωρίς mixins ή επανάληψη. ## Γραφή ενός 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 } ``` ## Χρήση του σε οποιοδήποτε component ```vue ``` Κάθε component που καλεί `useCounter()` παίρνει το **δικό του απομονωμένο** `count` — τα composables δημιουργούν fresh state σε κάθε κλήση, σε αντίθεση με μια κοινόχρηστη μεταβλητή επιπέδου module. ## Ένα ρεαλιστικό παράδειγμα: useFetch με 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 }; } ``` Τα composables μπορούν να χρησιμοποιούν lifecycle hooks, watchers και άλλα composables — και σημαντικά, **ενσωματώνουν το δικό τους cleanup** (`onUnmounted`), οπότε οι καταναλωτές δεν χρειάζεται να το θυμούνται. ## Composables vs mixins (ο παλιός τρόπος) ```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 ``` ## Γιατί έχει σημασία Τα composables είναι ο *ιδιωματικός* τρόπος εξαγωγής και επαναχρησιμοποίησης stateful logic στο Vue 3 — ανάκτηση δεδομένων, χειρισμό φορμών, παρακολούθηση ποντικιού/κύλισης, debouncing κ.λπ. Λύνουν το πρόβλημα επαναχρησιμοποίησης logic καθαρά (ρητά, χωρίς συγκρούσεις, σύνθετα, φιλικά προς TypeScript) όπου τα mixins του Vue 2 απέτυχαν. Είναι ο κύριος λόγος που οι ομάδες υιοθετούν το Composition API: η κοινόχρηστη logic γίνεται μια απλή, δοκιμάσιμη συνάρτηση αντί για διασκορπισμένο ή διπλοποιημένο κώδικα.