Composable'lar nedir ve nasıl yazarsınız?

Question

Accepted Answer

**Composable**, Composition API'yi kullanarak **durum bilgisi olan mantığı** (stateful logic) kapsülleyen yeniden kullanılabilir bir fonksiyondur. Kurala göre `useXxx` olarak adlandırılır ve reaktif durum artı fonksiyonlar döndürür — karışımlar (mixins) veya tekrarlamadan bileşenler arasında mantık paylaşmanıza olanak tanır. ## Composable yazma ```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 } ``` ## Herhangi bir bileşende kullanma ```vue ``` `useCounter()` çağıran her bileşen kendi **izole** `count` değerini alır — composable'lar her çağrıda yeni durum oluştururlar; bu, paylaşılan bir modül-seviyesi değişkenden farklıdır. ## Gerçekçi örnek: yaşam döngüsü ile useFetch ```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 }; } ``` Composable'lar yaşam döngüsü hook'ları, gözlemcileri ve diğer composable'ları kullanabilirler — ve önemlisi, **kendi temizliklerini** (`onUnmounted`) kapsüllerler, bu nedenle tüketiciler bunu hatırlamak zorunda değildir. ## Composable'lar ve karışımlar karşılaştırması (eski yol) ```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 ``` ## Neden önemli Composable'lar Vue 3'te durum bilgisi olan mantığı çıkarmak ve yeniden kullanmak için *standart* yoldur — veri getirme, form yönetimi, fare/kaydırma izleme, debouncing vb. Mantık yeniden kullanma sorununu temiz bir şekilde çözerler (açık, çakışmadan uzak, bileşenlenebilir, TypeScript uyumlu); Vue 2'nin karışımları bu konuda başarısız oldu. Bu, ekiplerin Composition API'yi benimsemelerinin birincil sebebidir: paylaşılan mantık, dağınık veya tekrarlanan kod yerine basit, test edilebilir bir fonksiyon haline gelir.