# Composition API (Vue.js / Nuxt.js) > Setup function, ref, reactive, computed, watch, lifecycle hooks, composables, script setup - 24 pertanyaan wawancara - Mid-Level - [Pertanyaan Wawancara: Vue.js / Nuxt.js](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara.md) ## 1. 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. ## 2. 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. ## 3. 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. ## 21 pertanyaan lagi tersedia - Bagaimana cara mengakses nilai sebuah ref di dalam fungsi setup()? - Bagaimana cara membuat properti computed di Composition API? Daftar gratis: https://sharpskill.dev/id/login ## Topik wawancara Vue.js / Nuxt.js lainnya - [Dasar-Dasar JavaScript](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/javascript-fundamentals.md): 20 pertanyaan, Junior - [JavaScript Modern (ES6+)](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/es6-modern-javascript.md): 20 pertanyaan, Junior - [Dasar-Dasar Vue](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/vue-basics.md): 22 pertanyaan, Junior - [Komponen Vue](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/vue-components.md): 20 pertanyaan, Junior - [Vue Router](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/vue-router.md): 18 pertanyaan, Junior - [Pinia State Management](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/pinia-state-management.md): 20 pertanyaan, Junior - [Vuex (Legacy)](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/vuex-legacy.md): 15 pertanyaan, Mid-Level - [Reaktivitas Vue](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/vue-reactivity.md): 20 pertanyaan, Mid-Level - [Dasar-Dasar Nuxt](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/nuxt-fundamentals.md): 22 pertanyaan, Mid-Level - [Data Fetching Nuxt](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/nuxt-data-fetching.md): 20 pertanyaan, Mid-Level - [SSR & SSG Nuxt](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/nuxt-ssr-ssg.md): 22 pertanyaan, Mid-Level - [Server Routes Nuxt](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/nuxt-server-routes.md): 20 pertanyaan, Mid-Level - [Modul Nuxt](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/nuxt-modules.md): 18 pertanyaan, Mid-Level - [Composable Vue](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/vue-composables.md): 20 pertanyaan, Mid-Level - [Form & Validasi Vue](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/vue-forms-validation.md): 20 pertanyaan, Mid-Level - [Manajemen State Nuxt](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/nuxt-state-management.md): 18 pertanyaan, Mid-Level - [Testing Vue](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/vue-testing.md): 20 pertanyaan, Mid-Level - [Deployment Nuxt & CI/CD](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/nuxt-deployment-cicd.md): 22 pertanyaan, Mid-Level - [Performa Vue](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/vue-performance.md): 22 pertanyaan, Senior - [Pola Lanjutan Vue](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/vue-advanced-patterns.md): 24 pertanyaan, Senior - [TypeScript dengan Vue](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/typescript-vue.md): 22 pertanyaan, Senior - [Autentikasi Nuxt](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/nuxt-auth.md): 20 pertanyaan, Senior - [SEO dengan Nuxt](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/nuxt-seo.md): 20 pertanyaan, Senior - [Internasionalisasi Nuxt](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/nuxt-i18n.md): 18 pertanyaan, Senior - [Arsitektur Vue](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/vue-architecture.md): 22 pertanyaan, Senior - [Keamanan Nuxt](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/nuxt-security.md): 20 pertanyaan, Senior - [Ekosistem Vue](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/vue-ecosystem.md): 18 pertanyaan, Senior - [Migrasi Vue 2→3 & Nuxt 2→3](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/migration-vue2-vue3-nuxt2-nuxt3.md): 22 pertanyaan, Senior --- Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack. HTML version of this page: https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/composition-api