Apakah composables dan bagaimana menulis satu?

Question

Apakah composables dan bagaimana menulis satu?

Accepted Answer

A **composable** adalah fungsi yang dapat digunakan kembali yang merangkum **logika stateful** menggunakan Composition API. Menurut konvensi diberi nama `useXxx` dan mengembalikan keadaan reaktif dan fungsi — memungkinkan Anda berbagi logika di seluruh komponen tanpa mixins atau pengulangan. ## Menulis 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 } ``` ## Menggunakannya di komponen mana pun ```vue ``` Setiap komponen yang memanggil `useCounter()` mendapatkan **terisolasi sendiri** `count` — composables membuat keadaan segar per panggilan, tidak seperti variabel tingkat modul bersama. ## Contoh realistis: useFetch dengan siklus hidup ```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 dapat menggunakan hook siklus hidup, pengamat, dan composables lainnya — dan yang paling penting, mereka **merangkum pembersihan mereka sendiri** (`onUnmounted`), jadi konsumen tidak perlu mengingatnya. ## Composables vs mixins (cara lama) ```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 ``` ## Mengapa ini penting Composables adalah cara *idiomatik* untuk mengekstrak dan menggunakan kembali logika stateful di Vue 3 — pengambilan data, penanganan formulir, pelacakan mouse/scroll, debouncing, dll. Mereka menyelesaikan masalah reuse logika dengan bersih (eksplisit, bebas tabrakan, dapat dikomposisi, ramah TypeScript) di mana mixins Vue 2 gagal. Mereka adalah alasan utama mengapa tim mengadopsi Composition API: logika bersama menjadi fungsi sederhana yang dapat diuji daripada kode yang tersebar atau diduplikasi.