Composition API
Setup function, ref, reactive, computed, watch, lifecycle hooks, composables, script setup
1Apa itu Composition API di Vue 3?
Apa itu Composition API di Vue 3?
Jawaban
Composition API adalah cara baru untuk mengatur logika komponen Vue menggunakan composition function alih-alih options (data, methods, computed). Cara ini memungkinkan pengelompokan logika berdasarkan fitur, bukan berdasarkan jenis option, sehingga mempermudah penggunaan ulang kode melalui composables. Composition API juga memberikan dukungan TypeScript yang lebih baik dan organisasi yang lebih baik untuk komponen yang kompleks.
2Apa fungsi utama yang digunakan dalam Composition API untuk mendefinisikan logika sebuah komponen?
Apa fungsi utama yang digunakan dalam Composition API untuk mendefinisikan logika sebuah komponen?
Jawaban
Fungsi setup() adalah titik masuk dari Composition API. Fungsi ini dijalankan sebelum komponen dibuat, bahkan sebelum created(). Fungsi ini menerima props dan context sebagai argumen dan harus mengembalikan objek berisi data dan fungsi yang akan diekspos ke template. Di dalam setup() inilah kita menggunakan ref, reactive, computed, watch, dan lifecycle hooks dari Composition API.
3Apa perbedaan utama antara ref() dan reactive()?
Apa perbedaan utama antara ref() dan reactive()?
Jawaban
ref() membuat referensi reaktif untuk nilai primitif atau objek, yang diakses melalui .value di dalam script (tetapi otomatis di-unwrap di template). reactive() membuat proxy reaktif hanya untuk objek dan array, tanpa memerlukan .value, tetapi kehilangan reaktivitasnya jika didestrukturisasi. ref() lebih serbaguna untuk nilai primitif, reactive() lebih alami untuk objek kompleks, tetapi memerlukan toRef/toRefs untuk destrukturisasi.
Bagaimana cara mengakses nilai sebuah ref di dalam fungsi setup()?
Bagaimana cara membuat properti computed di Composition API?
+21 pertanyaan wawancara
Topik wawancara Vue.js / Nuxt.js lainnya
Dasar-Dasar JavaScript
JavaScript Modern (ES6+)
Dasar-Dasar Vue
Komponen Vue
Vue Router
Pinia State Management
Vuex (Legacy)
Reaktivitas Vue
Dasar-Dasar Nuxt
Data Fetching Nuxt
SSR & SSG Nuxt
Server Routes Nuxt
Modul Nuxt
Composable Vue
Form & Validasi Vue
Manajemen State Nuxt
Testing Vue
Deployment Nuxt & CI/CD
Performa Vue
Pola Lanjutan Vue
TypeScript dengan Vue
Autentikasi Nuxt
SEO dengan Nuxt
Internasionalisasi Nuxt
Arsitektur Vue
Keamanan Nuxt
Ekosistem Vue
Migrasi Vue 2→3 & Nuxt 2→3
Kuasai Vue.js / Nuxt.js untuk wawancara berikutnya
Akses semua pertanyaan, flashcards, tes teknis, latihan code review dan simulator wawancara.
Mulai gratis