Composables — CompileDaily Study

Penjelasan

Composable adalah fungsi JavaScript biasa (namanya konvensinya diawali use) yang memanfaatkan Composition API (ref, computed, watch, dst) di dalamnya — dipakai untuk mengekstrak logika reaktif yang berulang di beberapa komponen jadi satu fungsi yang bisa dipakai ulang, setara custom hook di React.

Contoh Konsep

// composables/useLebar.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useLebar() {
    const lebar = ref(window.innerWidth);

    function handleResize() {
        lebar.value = window.innerWidth;
    }

    onMounted(() => window.addEventListener('resize', handleResize));
    onUnmounted(() => window.removeEventListener('resize', handleResize));

    return { lebar };
}

// Dipakai di komponen manapun:
// import { useLebar } from './composables/useLebar';
// const { lebar } = useLebar();

Praktikum

Buat composable useCounter(nilaiAwal) yang mengembalikan { jumlah, tambah, kurangi } — jumlah dari ref(), tambah dan kurangi adalah fungsi untuk menambah/mengurangi nilainya. Tulis juga contoh pemakaiannya di sebuah komponen.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Composable HARUS mengembalikan ref (bukan .value-nya langsung) supaya reaktivitasnya tetap terjaga saat dipakai di komponen lain — kalau composable mengembalikan jumlah.value (angka biasa) alih-alih jumlah (ref), komponen yang memakainya TIDAK akan ikut update otomatis saat nilainya berubah.