Composable: Fungsi Composition yang Dapat Digunakan Kembali
Ekstrak logika reaktif ke dalam fungsi composable yang diawali use, bagikan ke berbagai komponen, dan pahami perbedaannya dari mixin.
Composable: Fungsi Composition yang Dapat Digunakan Kembali adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu Composable?
Composable adalah fungsi yang menggunakan hook Composition API untuk mengenkapsulasi dan menggunakan kembali logika berstatus. Composable merupakan padanan mixin dalam Composition API—tetapi tanpa benturan namespace atau dependensi tersembunyi.
Composable Dasar
Ekstrak logika reaktif ke dalam fungsi yang diawali dengan use. Fungsi ini dapat menggunakan ref, computed, watch, dan hook siklus hidup—sama seperti setup().
// useCounter.ts
import { ref } from 'vue';
export function useCounter(initial = 0) {
const count = ref(initial);
const increment = () => count.value++;
const decrement = () => count.value--;
const reset = () => (count.value = initial);
return { count, increment, decrement, reset };
}
// Usage in any component:
const { count, increment } = useCounter(10);Composable dengan Hook Siklus Hidup
Composable dapat mendaftarkan hook siklus hidup. Hook tersebut dijalankan relatif terhadap komponen yang memanggil composable.
// useOnlineStatus.ts
import { ref, onMounted, onUnmounted } from 'vue';
export function useOnlineStatus() {
const isOnline = ref(navigator.onLine);
const update = () => (isOnline.value = navigator.onLine);
onMounted(() => {
window.addEventListener('online', update);
window.addEventListener('offline', update);
});
onUnmounted(() => {
window.removeEventListener('online', update);
window.removeEventListener('offline', update);
});
return { isOnline };
}Composable dengan Operasi Asinkron (useFetch)
Composable sangat cocok untuk pengambilan data asinkron—enkapsulasikan pola pemuatan/kesalahan/data.
// useFetch.ts
export function useFetch<T>(url: MaybeRef<string>) {
const data = ref<T | null>(null);
const loading = ref(true);
const error = ref<string | null>(null);
watchEffect(async (onCleanup) => {
const controller = new AbortController();
onCleanup(() => controller.abort());
loading.value = true;
error.value = null;
try {
const res = await fetch(unref(url), { signal: controller.signal });
data.value = await res.json();
} catch (e: any) {
if (e.name !== 'AbortError') error.value = e.message;
} finally { loading.value = false; }
});
return { data, loading, error };
}Menerima Ref sebagai Parameter
Composable dapat menerima nilai biasa maupun ref sebagai argumen menggunakan MaybeRef<T> (= T | Ref<T>) dan unref() untuk mengakses nilainya.
import type { MaybeRef } from 'vue';
import { unref } from 'vue';
function useDouble(num: MaybeRef<number>) {
return computed(() => unref(num) * 2);
}Composable vs Mixin
Mixin menyuntikkan properti ke dalam komponen tanpa asal yang jelas. Composable bersifat eksplisit—Anda dapat melihat dengan tepat apa yang disediakan composable dari nilai yang dikembalikannya. Beberapa composable dapat digunakan tanpa benturan nama.
Berbagi Status Antar-Komponen
Jika sebuah composable memanggil ref() di dalam dirinya sendiri, setiap komponen yang memanggil composable tersebut mendapatkan statusnya sendiri. Untuk berbagi status antar-komponen, panggil ref() pada lingkup modul (di luar fungsi composable).
// Shared state (module-level):
const sharedCount = ref(0);
export function useSharedCounter() {
// All callers share the same sharedCount
return { count: sharedCount, increment: () => sharedCount.value++ };
}Pustaka Composable
VueUse (vueuse.org) menyediakan lebih dari 200 composable siap pakai: useLocalStorage, useFetch, useDark, useIntersectionObserver, dan banyak lagi. Selalu periksa VueUse sebelum menulis dari awal.
Menguji Composable
Uji composable dengan memanggilnya di dalam komponen pengujian kecil atau menggunakan pola mountedApp dari @vue/test-utils. Vitest terintegrasi dengan baik dengan sistem reaktivitas Vue.
Konvensi Penamaan Composable
Selalu awali dengan use (useAuth, useFetch, useMediaQuery). Pertahankan fokusnya pada satu tanggung jawab. Hindari composable yang melakukan terlalu banyak hal yang tidak berkaitan.
Pengorganisasian Composable
Buat folder composables/. Gunakan satu file untuk setiap composable. File indeks mengekspor ulang semua composable. Ini mencerminkan cara hook khusus diorganisasikan dalam proyek React.
Pemeriksaan Singkat
Apa keunggulan utama composable dibandingkan mixin Vue?
Ringkasan: Composable Vue
Composable adalah fungsi berawalan use yang memanggil hook Composition API. Setiap pemanggil mendapatkan status independen, kecuali Anda menggunakan ref tingkat modul. Terima ref atau nilai dengan MaybeRef + unref. Daftarkan hook siklus hidup di dalam composable. Periksa VueUse sebelum menulis composable sendiri. Nilai kembalian yang eksplisit mencegah pencemaran namespace seperti pada mixin.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Composable: Fungsi Composition yang Dapat Digunakan Kembali” gratis?
Ya — teks lengkap “Composable: Fungsi Composition yang Dapat Digunakan Kembali” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Composable: Fungsi Composition yang Dapat Digunakan Kembali”?
Ekstrak logika reaktif ke dalam fungsi composable yang diawali use, bagikan ke berbagai komponen, dan pahami perbedaannya dari mixin. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Composable: Fungsi Composition yang Dapat Digunakan Kembali” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- ref() dan reactive()
- computed() dan watch()
- Fungsi setup() dan script setup
- Composable: Fungsi Composition yang Dapat Digunakan Kembali