Mitä ovat composables ja kuinka kirjoitat sellaisen?

Question

Mitä ovat composables ja kuinka kirjoitat sellaisen?

Accepted Answer

**Composable** on uudelleenkäytettävä funktio, joka kapsuloi **tilaisen logiikan** Composition API:ta käyttäen. Sopimuksen mukaan se nimetään `useXxx` ja palauttaa reaktiivisen tilan sekä funktioita — jolloin voit jakaa logiikkaa komponenttien välillä ilman mixineja tai toistoa. ## Composablen kirjoittaminen ```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 } ``` ## Käyttäminen missä tahansa komponentissa ```vue ``` Jokainen komponentti, joka kutsuu `useCounter()`, saa oman **eristetyn** `count`:in — composables luovat uutta tilaa joka kutsussa, toisin kuin jaettu moduulitason muuttuja. ## Realistinen esimerkki: useFetch lifecycle-houkilla ```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 voivat käyttää lifecycle hookkeja, watchereita ja muita composableja — ja ratkaisevasti ne **kapsuloivat oman siivoamisensa** (`onUnmounted`), joten käyttäjien ei tarvitse muistaa sitä. ## Composables vs mixins (vanha tapa) ```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 ``` ## Miksi tämä on tärkeää Composables ovat *idiomatinen* tapa poimia ja uudelleenkäyttää tilaista logiikkaa Vue 3:ssa — tietojen hakeminen, lomakkeiden käsittely, hiiren/vierityksen seuranta, debouncing jne. Ne ratkaisevat logiikan uudelleenkäytön ongelman puhtaasti (eksplisiittisesti, ilman ristiriitoja, komponoitavasti, TypeScript-ystävällisesti) missä Vue 2:n mixinit epäonnistuivat. Ne ovat pääasiallinen syy, miksi tiimit omaksuvat Composition API:n: jaettu logiikka tulee yksinkertaiseksi, testattavaksi funktioksi hajautetun tai päällekkäisen koodin sijaan.