## Composition API: Kayak Lego yang Bisa Disusun Bebas Bayangin kamu punya kotak mainan Lego. Options API itu kayak kamu harus taruh semua balok merah di kotak A, balok biru di kotak B, balok kuning di kotak C. Kalau mau bikin rumah, kamu harus bolak-balik antar kotak. Composition API? Kamu bisa ambil balok-balok yang kamu butuh buat rumah, susun jadi satu grup. Mau bikin mobil? Ambil balok lain, grup lagi. Lebih fleksibel dan organized. ## Kenapa Pakai Composition API? ### Benefits yang Kamu Dapat: 1. **Logic Tergrup Rapi** - Code yang berhubungan bisa dikumpulin bareng, ga berceceran 2. **Reusable** - Extract logic ke composables, bisa dipake berkali-kali 3. **TypeScript Friendly** - Dukungan TypeScript lebih baik, autocomplete lebih akurat 4. **Flexible** - Ga terikat struktur options yang kaku 5. **Easier Testing** - Function terpisah lebih mudah di-test ### Options API vs Composition API **Options API (cara lama):** ```vue export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } }, computed: { double() { return this.count * 2 } } } ``` **Composition API (cara baru):** ```vue const count = ref(0) const increment = () => count.value++ const double = computed(() => count.value * 2) ``` Lebih simpel, lebih clean. ## Setup Function Composition API dimulai dari `setup()`: ```vue ``` **Penjelasan:** - `ref(0)` bikin reactive variable dengan initial value 0 - Di script, akses value pake `.value` (contoh: `count.value++`) - Di template, Vue otomatis unwrap jadi ga perlu `.value` - Semua yang di-return dari `setup()` bisa dipake di template ## Script Setup (Recommended) Tapi yang lebih clean lagi pake ` ``` No more return statement. Semua yang di-define otomatis available di template. Clean! ## ref vs reactive Ini yang sering bikin bingung di awal. ### ref Buat primitive values (string, number, boolean): ```vue ``` ### reactive Buat objects: ```vue ``` ### Kapan Pake Apa? - **ref**: Buat nilai tunggal atau kalau mau reassign keseluruhan object - **reactive**: Buat object yang property-nya sering di-update Secara pribadi, gue lebih sering pake `ref` karena lebih konsisten. ## Computed Properties Computed itu derived state. Value-nya otomatis update kalau dependency-nya berubah. ```vue ``` **Bedanya sama method biasa:** - Computed di-cache - cuma jalan ulang kalau dependency-nya berubah - Method selalu jalan setiap kali dipanggil - Computed lebih efisien buat kalkulasi yang berat ## Watch & WatchEffect ### watch Jalanin side effect pas value tertentu berubah: ```vue ``` ### watchEffect Otomatis track dependency: ```vue ``` ## Lifecycle Hooks Di Composition API, lifecycle hooks jadi functions: ```vue ``` ## Composables: Logic yang Bisa Dipakai Ulang Ini kekuatan sebenarnya dari Composition API. Extract logic ke function yang bisa dipakai ulang. ```javascript // composables/useCounter.js import { ref } from 'vue' export function useCounter(initialValue = 0) { const count = ref(initialValue) function increment() { count.value++ } function decrement() { count.value-- } function reset() { count.value = initialValue } return { count, increment, decrement, reset } } ``` Pake di component: ```vue ``` ### Composable buat Fetch Data ```javascript // composables/useFetch.js import { ref } from 'vue' export function useFetch(url) { // Setup reactive states const data = ref(null) // Hasil fetch const error = ref(null) // Error kalau gagal const loading = ref(true) // Loading state // Fetch data dari API fetch(url) .then(res => res.json()) .then(json => { data.value = json // Set data kalau berhasil }) .catch(err => { error.value = err // Set error kalau gagal }) .finally(() => { loading.value = false // Stop loading state }) // Return semua states buat dipake di component return { data, error, loading } } ``` **Cara pake:** ```vue ``` ## Props & Emits ```vue ``` ## Kapan Pakai Composition API? ### Pakai Composition API Kalau: - Component punya logic yang kompleks dan banyak fitur - Mau reuse logic di banyak component (composables) - Pakai TypeScript dan butuh type safety yang baik - Tim kamu prefer functional programming style ### Tetap Pakai Options API Kalau: - Component simpel (cuma 1-2 fitur) - Tim masih belajar Vue dan butuh struktur yang jelas - Maintain proyek lama Vue 2 ### Composition API vs React Hooks? Mirip konsepnya, tapi beda implementasi: **React Hooks:** ```jsx const [count, setCount] = useState(0) // Jalan ulang tiap render ``` **Vue Composition API:** ```vue const count = ref(0) // Reactive, ga jalan ulang ``` Vue lebih eksplisit (pake `.value`), React lebih implisit. Pilih sesuai preferensi! ## Real-World Example: Form dengan Validation ```vue ``` Semua logic form dalam satu tempat. Clean dan mudah dipahami! ## Kesimpulan Composition API bikin code Vue jadi lebih: - **Organized** - Logic yang related bisa di-group bareng - **Reusable** - Extract ke composables - **Type-friendly** - Dukungan TypeScript lebih baik - **Flexible** - Bebas organize code sesuai kebutuhan ### Checklist Buat Mulai - [ ] Install Vue 3 atau update project ke versi terbaru - [ ] Pelajari `ref` dan `reactive` untuk state management - [ ] Coba buat component simpel dengan `

{{ title }}

Vue 3 Composition API: Cara Modern Bikin Component