Question 1

Apa perbedaan utama antara var dan let di JavaScript?

Accepted Answer

Perbedaan mendasarnya terletak pada scope variabel. let memiliki block scope, artinya variabel yang dideklarasikan dengan let hanya ada di dalam blok tempat ia didefinisikan (di antara kurung kurawal). var memiliki function scope, yang dapat menyebabkan perilaku tak terduga karena variabel dapat diakses di luar blok. Perbedaan scope ini menjadikan let pilihan yang direkomendasikan untuk menghindari bug terkait hoisting dan scope.

Question 2

Apa itu Promise dalam JavaScript?

Accepted Answer

Promise adalah objek yang merepresentasikan penyelesaian atau kegagalan akhir dari sebuah operasi asinkron. Ia memungkinkan penanganan operasi yang memakan waktu (permintaan HTTP, pembacaan file) tanpa memblokir eksekusi kode. Sebuah Promise dapat memiliki tiga keadaan: pending (menunggu), fulfilled (berhasil diselesaikan), atau rejected (gagal dengan sebuah error).

Question 3

Apa itu instance Vue?

Accepted Answer

Instance Vue adalah objek yang dibuat dengan memanggil createApp() yang merepresentasikan aplikasi. Objek root ini berisi semua data reaktif, method, dan opsi konfigurasi. Objek ini berfungsi sebagai titik masuk untuk me-mount aplikasi ke elemen DOM dan menginisialisasi sistem reaktivitas Vue.

Question 4

Apa itu komponen Vue?

Accepted Answer

Komponen Vue adalah instance Vue yang dapat digunakan kembali dengan sebuah nama. Komponen ini mengenkapsulasi HTML, CSS, dan JavaScript ke dalam satu unit logis yang independen. Komponen memungkinkan pembagian antarmuka pengguna menjadi bagian-bagian yang dapat digunakan kembali dan mudah dipelihara. Setiap komponen memiliki template, logika, dan style sendiri, sehingga memudahkan pengorganisasian kode dan penggunaan ulang.

Question 5

Apa struktur minimum yang diperlukan untuk aplikasi Nuxt 3?

Accepted Answer

Aplikasi Nuxt 3 hanya membutuhkan file app.vue atau direktori pages/ di root proyek. Jika app.vue ada tanpa folder pages/, Nuxt membuat aplikasi tanpa Vue Router. Jika pages/ ada, Nuxt secara otomatis mengaktifkan file-based routing dan membutuhkan <NuxtPage /> di app.vue untuk menampilkan rute.

Question 6

Apa perbedaan utama antara useFetch dan useAsyncData di Nuxt?

Accepted Answer

useFetch adalah wrapper di sekitar useAsyncData dan $fetch yang menyederhanakan panggilan API umum. Ia secara otomatis menangani konstruksi URL dan menerima URL langsung sebagai argumen pertama, sedangkan useAsyncData memerlukan key unik dan fungsi fetcher khusus. Gunakan useFetch untuk panggilan API sederhana, useAsyncData untuk logika fetching yang kompleks.

Question 7

Apa itu Server-Side Rendering (SSR) di Nuxt?

Accepted Answer

SSR menghasilkan HTML lengkap di server pada setiap permintaan, lalu mengirimkannya ke klien. Ini meningkatkan SEO karena mesin pencari menerima konten HTML yang langsung dapat diakses, dan juga meningkatkan waktu hingga first paint. SSR adalah mode rendering default di Nuxt 3, tidak seperti rendering sisi klien di mana JavaScript menghasilkan konten di browser.

Question 8

Apa itu Virtual DOM dalam Vue?

Accepted Answer

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.

Question 9

Apa tujuan utama dari provide/inject di Vue 3?

Accepted Answer

Provide/inject memungkinkan pengiriman data dari komponen induk ke komponen turunan mana pun tanpa harus melewatkan props melalui setiap level perantara. Ini menghindari 'props drilling', di mana props harus dilewatkan melalui beberapa level komponen yang tidak membutuhkannya. Sangat berguna untuk berbagi data global seperti konfigurasi tema atau status autentikasi.

Question 10

Apa peran utama defineComponent di Vue 3 dengan TypeScript?

Accepted Answer

defineComponent mengaktifkan type inference TypeScript untuk opsi komponen. Tanpa fungsi ini, konteks this akan diperlakukan sebagai any di Options API. Ini memastikan props, data, computed, dan method ditipekan dengan benar secara otomatis.

Pertanyaan wawancara Vue.js / Nuxt.js

Siap untuk wawancara Vue.js / Nuxt.js?

Jelajahi semua topik Vue.js / Nuxt.js

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

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