# Performa Vue (Vue.js / Nuxt.js) > Virtual DOM, optimasi reactivity, v-once, v-memo, lazy loading, code splitting, ukuran bundle - 22 pertanyaan wawancara - Senior - [Pertanyaan Wawancara: Vue.js / Nuxt.js](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara.md) ## 1. Apa itu Virtual DOM dalam Vue? **Jawaban** Virtual DOM adalah representasi JavaScript yang ringan dari pohon DOM yang sebenarnya. Vue menggunakan Virtual DOM untuk meminimalkan manipulasi DOM secara langsung, yang mahal dari segi performa. Ketika state berubah, Vue membuat Virtual DOM baru, membandingkannya dengan yang lama (algoritma diffing), lalu menerapkan hanya perubahan yang diperlukan ke DOM yang sebenarnya. Pendekatan ini secara signifikan mengurangi jumlah operasi DOM dan meningkatkan performa, terutama untuk aplikasi kompleks dengan banyak pembaruan. ## 2. Apa perbedaan utama antara ref() dan shallowRef()? **Jawaban** ref() membuat referensi reaktif secara mendalam di mana semua properti bersarang juga reaktif, sedangkan shallowRef() hanya membuat properti .value itu sendiri reaktif. Dengan shallowRef(), mutasi mendalam di dalam objek tidak memicu pembaruan. Seluruh .value harus diganti untuk memicu reactivity. shallowRef() berguna untuk mengoptimalkan performa dengan struktur data besar di mana reactivity mendalam tidak diperlukan, atau untuk mengintegrasikan sistem state eksternal. ## 3. Apa peran direktif v-once? **Jawaban** Direktif v-once merender sebuah elemen dan anak-anaknya hanya sekali selama render pertama, lalu memperlakukannya sebagai konten statis untuk semua render berikutnya. Ini berarti bahwa meskipun data berubah, elemen tersebut tidak akan pernah diperbarui. Direktif ini berguna untuk mengoptimalkan performa konten statis yang tidak pernah berubah setelah mount awal, seperti gambar banner, logo, atau teks yang tidak memerlukan pembaruan dinamis. ## 19 pertanyaan lagi tersedia - Bagaimana cara kerja direktif v-memo yang diperkenalkan di Vue 3.2+? - Apa kegunaan markRaw() dalam Vue? 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 - [Composition API](https://sharpskill.dev/id/technologies/vue-nuxt/pertanyaan-wawancara/composition-api.md): 24 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 - [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/vue-performance