Question 1

What is the main difference between var and let in JavaScript?

Accepted Answer

The fundamental difference lies in variable scope. let has block scope, meaning a variable declared with let only exists within the block where it is defined (between curly braces). var has function scope, which can cause unexpected behaviors because the variable is accessible outside the block. This scope difference makes let the recommended choice to avoid bugs related to hoisting and scope.

Question 2

What is a Promise in JavaScript?

Accepted Answer

A Promise is an object representing the eventual completion or failure of an asynchronous operation. It allows handling operations that take time (HTTP requests, file reads) without blocking code execution. A Promise can have three states: pending (waiting), fulfilled (successfully resolved), or rejected (failed with an error).

Question 3

What is a Vue instance?

Accepted Answer

A Vue instance is the object created by calling createApp() that represents the application. This root object contains all reactive data, methods, and configuration options. It serves as the entry point for mounting the application to a DOM element and initializing Vue's reactivity system.

Question 4

What is a Vue component?

Accepted Answer

A Vue component is a reusable Vue instance with a name. It encapsulates HTML, CSS and JavaScript into an independent logical unit. Components allow dividing the user interface into reusable and maintainable pieces. Each component has its own template, logic and styles, facilitating code organization and reusability.

Question 5

What is the minimum required structure for a Nuxt 3 application?

Accepted Answer

A Nuxt 3 application requires only an app.vue file or a pages/ directory at the project root. If app.vue exists without a pages/ folder, Nuxt creates an application without Vue Router. If pages/ exists, Nuxt automatically enables file-based routing and requires <NuxtPage /> in app.vue to display routes.

Question 6

What is the main difference between useFetch and useAsyncData in Nuxt?

Accepted Answer

useFetch is a wrapper around useAsyncData and $fetch that simplifies common API calls. It automatically handles URL construction and accepts a URL directly as the first argument, while useAsyncData requires a unique key and a custom fetcher function. Use useFetch for simple API calls, useAsyncData for complex fetching logic.

Question 7

What is Server-Side Rendering (SSR) in Nuxt?

Accepted Answer

SSR generates the complete HTML on the server with each request, then sends it to the client. This improves SEO as search engines receive immediately accessible HTML content, and also improves time to first paint. SSR is the default rendering mode in Nuxt 3, unlike client-side rendering where JavaScript generates content in the browser.

Question 8

What is the Virtual DOM in Vue?

Accepted Answer

The Virtual DOM is a lightweight JavaScript representation of the real DOM tree. Vue uses the Virtual DOM to minimize direct DOM manipulations, which are expensive in terms of performance. When state changes, Vue creates a new Virtual DOM, compares it with the old one (diffing algorithm), then applies only the necessary changes to the real DOM. This approach significantly reduces the number of DOM operations and improves performance, especially for complex applications with many updates.

Question 9

What is the main purpose of provide/inject in Vue 3?

Accepted Answer

Provide/inject allows passing data from a parent component to any descendant component without passing props through every intermediate level. This avoids 'props drilling' where props must be passed through multiple component levels that don't need them. Particularly useful for sharing global data like theme configuration or authentication state.

Question 10

What is the primary role of defineComponent in Vue 3 with TypeScript?

Accepted Answer

defineComponent enables TypeScript type inference for component options. Without this function, the this context would be treated as any in the Options API. It ensures that props, data, computed and methods are correctly typed automatically.

Pertanyaan wawancara Vue.js / Nuxt.js

Siap untuk wawancara Vue.js / Nuxt.js?

Jelajahi semua topik Vue.js / Nuxt.js

JavaScript Fundamentals

Modern JavaScript (ES6+)

Vue Basics

Vue Components

Vue Router

Pinia State Management

Vuex (Legacy)

Composition API

Vue Reactivity

Nuxt Fundamentals

Nuxt Data Fetching

Nuxt SSR & SSG

Nuxt Server Routes

Nuxt Modules

Vue Composables

Vue Forms & Validation

Nuxt State Management

Vue Testing

Nuxt Deployment & CI/CD

Vue Performance

Vue Advanced Patterns

TypeScript with Vue

Nuxt Authentication

SEO with Nuxt

Nuxt Internationalization

Vue Architecture

Nuxt Security

Vue Ecosystem

Migration Vue 2→3 & Nuxt 2→3

Kuasai Vue.js / Nuxt.js untuk wawancara berikutnya