Performa Vue
Virtual DOM, optimasi reactivity, v-once, v-memo, lazy loading, code splitting, ukuran bundle
1Apa itu Virtual DOM dalam Vue?
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.
2Apa perbedaan utama antara ref() dan shallowRef()?
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.
3Apa peran direktif v-once?
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.
Bagaimana cara kerja direktif v-memo yang diperkenalkan di Vue 3.2+?
Apa kegunaan markRaw() dalam Vue?
+19 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)
Composition API
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
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