Vue Interview Master

Vue.js is a progressive JavaScript framework for building user interfaces. It is designed from the ground up to be incrementally adoptable, and can ea...

Core features include Reactive Data Binding, Components, Directives (v-if, v-for, etc.), Templates, and the Virtual DOM.

Every Vue application starts by creating a new Vue instance with the `Vue` function (in Vue 2) or `createApp` (in Vue 3).

Vue's reactivity system automatically tracks dependency changes and updates the DOM when the underlying data changes, typically using a Model-View-Vie...

Vue 3 introduced the Composition API, better TypeScript support, Fragments, Teleport, and significant performance improvements through a faster Virtua...

Directives are special attributes with the `v-` prefix. They apply special reactive behavior to the rendered DOM (e.g., `v-bind`, `v-model`, `v-on`).

`v-model` provides two-way data binding on form input, textarea, and select elements. It automatically picks the correct way to update the element bas...

`v-if` is 'real' conditional rendering; it ensures that event listeners and child components inside the conditional block are properly destroyed and r...

Components are reusable Vue instances with a name. They allow you to divide your UI into independent, reusable pieces.

Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component insta...

You use the `v-on` directive (shorthand `@`) to listen to DOM events and run some JavaScript when they're triggered.

Computed properties are functions used to handle complex logic that depends on other reactive data. They are cached based on their reactive dependenci...

Computed properties are cached based on their dependencies. A computed property will only re-evaluate when some of its reactive dependencies have chan...

Watchers allow you to perform asynchronous or expensive operations in response to changing data. Use `watch` when you need to perform an action based ...

The `key` attribute is used as a hint for Vue's virtual DOM algorithm to identify VNodes when diffing the new list of nodes against the old list. It s...

Lifecycle hooks are functions that give you the opportunity to add code at specific stages of a component's life (e.g., `created`, `mounted`, `updated...

The `created` hook is called synchronously after the instance is created. At this stage, data observation and events are set up, but the mount hasn't ...

The `mounted` hook is called after the instance has been mounted to the DOM. You can access the DOM elements at this stage.

A template is an HTML-based syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance's data.

An SFC is a file with a `.vue` extension that contains the template, logic, and styles of a component in a single file.

`v-bind` (shorthand `:`) is used to dynamically bind one or more attributes, or a component prop, to an expression.

Children communicate to parents by emitting events using `$emit` (Options API) or `emit` (Composition API).

The Virtual DOM is a lightweight JavaScript object representation of the actual DOM. Vue handles updates by comparing changes in the Virtual DOM and o...

Filters were used to apply common text formatting. Note: Filters are removed in Vue 3; use computed properties or methods instead.

`v-text` updates the element's text content. It is similar to using mustache tags (`{{ }}`).

`v-html` updates the element's `innerHTML`. Careful with XSS vulnerabilities!

`v-once` renders the element and component once only. On subsequent re-renders, the element/component and all its children will be treated as static c...

`v-cloak` is used to hide un-compiled mustache bindings until the Vue instance is ready.

In Vue 3, you use `app.component('my-component', { ... })` on the app instance.

`ref` is used to register a reference to an element or a child component. In Composition API, it's also used to create reactive variables.

`ref` can hold primitives or objects and requires `.value` to access/mutate (in JS). `reactive` only holds objects and does not require `.value`.

The `setup` function is the entry point for using the Composition API in components. It's executed before the component is created.

Forms are handled using `v-model` for two-way binding and `@submit.prevent` for handling form submission while preventing page reload.

`@` is a shorthand for `v-on`, used for event listening.

`:` is a shorthand for `v-bind`, used for attribute binding.

`v-pre` skips compilation for this element and all its children. You can use this for displaying raw mustache tags.

`router-link` doesn't support `target` directly for internal navigation, but you can use an `<a>` tag or handle it manually if you need to open in a n...

Slots are a mechanism for content distribution, allowing parents to pass HTML or components into a child component's template.

Named slots allow you to have multiple slots in a single component by assigning a name to the `<slot>` element.

Scoped slots allow the child component to pass data back to the parent for it to use within the slotted content.

Vue CLI is a standard tooling for Vue.js development, providing project scaffolding, dev server, and build chain.

Vite is a modern build tool that provides a faster development experience. It is now the recommended tool for Vue projects instead of Vue CLI.

You can use pre-processors like Sass, Less, or Stylus by adding `lang="scss"` to the `<style>` tag.

By adding the `scoped` attribute to a `<style>` tag, the CSS will only apply to elements of the current component.

`nextTick` allows you to execute code after the next DOM update cycle. Use it when you need to wait for the DOM to update after a data change.

.stop` stops event propagation (bubble up). `.prevent` calls `event.preventDefault()` (stops default browser behavior).`

Mixins are a flexible way to distribute reusable functionalities for Vue components (mainly used in Options API; Composition API is preferred in Vue 3...

By adding a catch-all route at the end of your routes array: `{ path: '/:pathMatch(.*)*', component: NotFound }`.

It allows a component to pass all non-prop attributes down to a child element or component.

These are compiler macros used in `<script setup>` to declare props and emits without needing to import them.

Composition API is a set of APIs that allows us to author Vue components using imported functions instead of declaring options. It provides better log...

A pair of options/functions used for deep-level dependency injection, allowing a grandparent to pass data to a grandchild without prop drilling.

Teleport is a built-in component that allows us to 'teleport' a part of a component's template into a DOM node that exists outside the component hiera...

`toRefs` converts a reactive object to a plain object where each property is a ref. `toRef` creates a ref for a specific property on a source reactive...

Navigation guards are used to guard navigations either by redirecting it or canceling it. Types include Global (beforeEach), Per-route (beforeEnter), ...

Pinia is the recommended store library for Vue apps. It provides a simpler API than Vuex, is fully type-safe, and works well with both Options and Com...

Pinia removes Mutations, provides flat store structure (no nested modules), and has better TypeScript inference. Vuex is the older standard.

Async components are loaded only when they are needed, which helps in code-splitting and reducing the initial bundle size.

Custom directives are defined with hooks like `mounted`, `updated`, etc., to perform low-level DOM manipulations.

Suspense is a built-in component used to coordinate multiple primitive async dependencies (like async components or data fetching) and show a loading ...

Plugins add global-level functionality to Vue. They are usually installed via `app.use(plugin)`.

Using `app.config.errorHandler` for global error catching or `errorCaptured` hook for component-level catching.

Using 'Composables'—functions that encapsulate logic (using refs, computed, hooks) and return state/methods for components to use.

These are versions of `ref` and `reactive` that only track changes at the top level, ignoring nested property changes for performance optimization.

`watchEffect` immediately runs a function while reactively tracking its dependencies and re-runs it whenever the dependencies change.

`watch` is lazy (runs only when watched source changes), gives access to old/new values, and specifies exactly what to watch. `watchEffect` runs immed...

Using `v-show` for frequent toggles, `v-once` for static content, `shallowRef` for large immutable datasets, and code splitting via async components.

It prevents the component's root element from automatically inheriting attributes passed to the component, allowing you to manually bind them using `v...

A pattern where a function takes a component and returns a new one with additional props or logic (less common in Vue than React, but possible).

A component that has no state and no instance. In Vue 3, they are just plain functions that return VNodes.

`markRaw` marks an object so that it will never be converted to a reactive proxy, useful for large non-reactive objects (like third-party maps).

Computed properties can have a setter by providing an object with `get` and `set` functions instead of just a function.

Rendering the component tree into an HTML string on the server and sending it to the client for hydration (usually via Nuxt.js).

Static components are declared in the template. Dynamic components use the `<component :is="..." />` syntax to switch between components.

`keep-alive` is a built-in component that caches component instances when switching between them, preserving their state.

Props/Events (Parent-Child), Provide/Inject (Ancestors), Global Store (Pinia/Vuex), or Event Bus (using Mitt library in Vue 3).

`v-slot:header` can be shortened to `#header`.

A component where the DOM handles the data (using refs to read values) instead of Vue state.

Vue 3 supports `v-bind` in CSS, allowing you to link CSS properties directly to reactive component variables.

It's a loader for Webpack that allows you to author Vue components in SFC format.

Vue uses a `Dep` class to keep track of watchers that depend on a reactive property, triggering them when the property changes.

These hooks allow access to attributes and slots inside the `setup` function or `<script setup>`.

You can validate the arguments passed to emitted events by defining `emits` as an object with validation functions.

The process of updating the real DOM by comparing the old VNode tree with the new one and applying minimal changes.

By using `beforeEach` guard and attaching metadata to routes via the `meta` field.

In `<script setup>`, components are closed by default. `defineExpose` is used to explicitly declare which properties/methods are available when the pa...

Pass a `ref` or a `reactive` object to `provide` to ensure the injected value stays reactive in child components.

Routes with params like `/user/:id`, where `id` can be accessed via `route.params.id`.

`.native` was used to listen to native DOM events on component root. In Vue 3, this is removed; all events not declared in `emits` are treated as nati...

By iterating through `route.matched` array to get the hierarchy of nested routes.

An executable that provides internal build commands for Vue CLI projects.

`defineComponent` is a type helper for better TypeScript support, whereas `export default` is standard JS.

Used to handle cases where the route changes but the component is reused (e.g., from `/user/1` to `/user/2`).

Used for animating transitions of multiple elements (e.g., items in a list) using `v-for`.

Using `AbortController` and calling `.abort()` in the `onUnmounted` hook.

Actually not a standard term, but usually refers to testing only the current component without its children.

Speeds up rendering for large lists by skipping re-renders if a specific dependency array hasn't changed.

Vue allows compiling components into standard Web Components using `defineCustomElement`.

Occurs in SSR when the server-rendered HTML doesn't match the client-side initial render (e.g., due to random numbers or dates).

Used to access CSS Module classes in the Composition API.

Vue 3 uses `Proxy` to intercept property access and mutation. When a property is accessed, a dependency is 'tracked'. When mutated, the dependencies a...

Vue 3 uses a 'Blocked' Virtual DOM which analyzes templates at build time to mark dynamic parts. During patching, it only visits the dynamic nodes, si...

`Proxy` can detect property addition/deletion and array index changes, which `defineProperty` couldn't. `Proxy` is also faster and doesn't require pre...

Using `@vue/runtime-core`, you can create custom renderers for non-DOM environments like Canvas, Terminal, or Mobile (e.g., Vue Native, TresJS).

Vue 3 compiler analyzes the template and adds 'Patch Flags' to VNodes (e.g., TEXT, CLASS). The runtime then uses these flags to skip unnecessary check...

Using Webpack Module Federation, single-spa, or Vite's module-based approach with iframes or shared runtimes.

Allows creating a scope that can collect reactive effects (like watchers and computed) and dispose of them all at once, useful for build-time abstract...

Runtime-only is smaller but requires pre-compilation of templates. Runtime+Compiler allows compiling templates in the browser but adds ~10KB overhead.

Vue 3 is written in a way that if you don't use a feature (like `Teleport` or `v-model`), it won't be included in the final production bundle.

The compiler hoists static VNodes outside of the render function so they are created only once and reused across renders.

Vue detects CSS transitions/animations on the element and automatically adds/removes CSS classes (`v-enter-from`, `v-enter-to`, etc.) at the right tim...

Refs are automatically unwrapped when accessed as properties of a reactive object or in the template, so you don't need `.value`.

Vue adds a unique `data-v-xxxx` attribute to elements and modifies CSS selectors to target that attribute (`.my-class[data-v-xxxx]`).

Creating a package of atomic components using SFCs, documenting with Storybook, and distributing via NPM with types.

Vite uses ES Modules in development. When a file changes, it only replaces the module in the browser without reloading the page, preserving state.

Generating every route of your application as a static HTML file at build time for maximum speed and SEO.

By modularizing stores, using getters for derived state, and leveraging Pinia's subscription API for side effects.

In Vue 2, functional components were significantly faster. In Vue 3, regular components are so fast that functional components offer minimal benefit.

These are composables designed for Universal data fetching, ensuring data is fetched once on the server and hydrated on the client.

A compiler-time transformation that allowed using `$ref` instead of `ref` to avoid `.value` (deprecated/removed in later versions in favor of standard...

Always sanitize HTML using DOMPurify before using `v-html`. Ensure your API uses CSRF tokens if it relies on cookie-based auth.

Actually Vue doesn't officially support custom modifiers, but you can wrap logic in a function or handle it in a custom directive.

By default uses `modelValue` prop and `update:modelValue` event. Can be customized with different prop/event names in Vue 3.

By offloading heavy logic into a worker file and communicating via `postMessage` encapsulated within a Composable.

Using the `vite-plugin-federation` to share modules between independent builds at runtime.

Organizing the project into Layers (app, processes, pages, features, entities, shared) to improve maintainability.

By testing the logic in isolation, occasionally using a dummy component if the composable relies on lifecycle hooks.

Checking for browser-specific APIs (window, document) used during the first render, or mismatched data between sever/client.

Using Vue Router Meta fields and a global `beforeEach` guard to check user roles against required permissions.

Coordinating top-level loading states by making `setup` async or using `await` in `<script setup>`.

Compiler optimization where static HTML parts are stringified and created via `innerHTML` for massive speedups in heavy static templates.

As a 'light' alternative to Pinia for feature-scoped or module-scoped state sharing.

Integers representing different types of dynamic content (e.g., 1 for text, 2 for class) used by the patcher.

A custom directive that tracks time between clicks and triggers a callback if the interval is small.

`Transition` is for a single element. `TransitionGroup` is for multiple elements, requiring a `tag` prop and unique `key` for each item.

Using SSR/SSG for fast initial load, aggressive caching, CDN distribution, and optimized bundle fragmentation.

`destroy` was used in Vue 2; it was renamed to `unmount` in Vue 3 to better match the lifecycle of many modern frameworks.

Used by build tools to parse, template-compile, and style-compile SFC files programmatically.

An object with `type`, `props`, `children`, `key`, `el`, and other management properties.

Ensuring watchers and event listeners are properly stopped/removed when no longer needed (Vue 3 handles most of this automatically in `onUnmounted`).

Slots are passed as an object of functions (`children` property in VNode) that return arrays of VNodes.

`v-once` never updates. `v-memo` only updates when its dependencies change, allowing partial reactivity.

Through complex TypeScript typings or using the `<script setup lang="ts" generic="T">` feature in Vue 3.3+.

Plugins are for global configuration or app-wide services. Composables are for shared logic and state between components.

Use `ref` to target a container, initialize in `mounted`, and use `markRaw` to prevent Vue from trying to make the map object reactive.

A macro in Vue 3.3+ to define component options (like `name`, `inheritAttrs`) directly inside `<script setup>`.

Using `@slots` or `defineSlots` to provide type safety for scoped slots in external component usage.

Using libraries like Vuelidate or VeeValidate which allow validating specific fields or groups of fields.

HTML5 (`createWebHistory`), Hash (`createWebHashHistory`), and Memory (`createMemoryHistory`) modes and how each interacts with the server.

Vapor mode is an upcoming compiler that generates zero-virtual-DOM code, resulting in even smaller and faster apps.

Create a function that returns reactive `data`, `error`, and `loading` states.

export function useFetch(url) {
  const data = ref(null);
  const error = ref(null);
  const loading = ref(true);

  fetch(url)
    .then(res => res.json())
    .then(json => (data.value = json))
    .catch(err => (error.value = err))
    .finally(() => (loading.value = false));

  return { data, error, loading };
}

Use a simple ref and toggle it with a click.

<script setup>
const active = ref(false);
</script>
<button @click="active = !active">
  {{ active ? 'ON' : 'OFF' }}
</button>

Use a computed property that filters the array based on a query ref.

const query = ref('');
const filtered = computed(() => {
  return items.value.filter(item => item.name.includes(query.value));
});

Use `setInterval` and `onUnmounted` for cleanup.

const count = ref(60);
let timer;
onMounted(() => {
  timer = setInterval(() => count.value--, 1000);
});
onUnmounted(() => clearInterval(timer));

A function that syncs a reactive ref with a localStorage key.

export function useLocalStorage(key, val) {
  const storage = ref(JSON.parse(localStorage.getItem(key)) || val);
  watchEffect(() => localStorage.setItem(key, JSON.stringify(storage.value)));
  return storage;
}

Use JSON parse/stringify for simple objects or structuredClone for modern browsers.

const copy = obj => JSON.parse(JSON.stringify(obj));

Watch the input and use a timeout.

watch(input, (val) => {
  clearTimeout(timeout);
  timeout = setTimeout(() => search(val), 500);
});

Track mouse coordinates globally.

export function useMouse() {
  const x = ref(0);
  const y = ref(0);
  const update = e => { x.value = e.pageX; y.value = e.pageY; };
  onMounted(() => window.addEventListener('mousemove', update));
  onUnmounted(() => window.removeEventListener('mousemove', update));
  return { x, y };
}

Reverse and compare.

const isPal = s => s === s.split('').reverse().join('');

Focus the element when it is mounted.

const vFocus = {
  mounted: (el) => el.focus()
};

Use arguments like `v-model:title` and `v-model:content`.

defineProps(['title', 'content']);
const emit = defineEmits(['update:title', 'update:content']);

Use recursion with reduce.

const flatten = arr => arr.reduce((acc, val) => 
  Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), []);

Filter and then reduce.

const sumEven = arr => arr.filter(n => n % 2 === 0).reduce((a, b) => a + b, 0);

Wrap `Suspense` with an `onErrorCaptured` component.

<Suspense>
  <AsyncComponent />
  <template #fallback>Loading...</template>
</Suspense>

Use a Set.

const unique = arr => [...new Set(arr)];

A function that returns a boolean and a toggle function.

export function useToggle(init = false) {
  const state = ref(init);
  const toggle = () => (state.value = !state.value);
  return [state, toggle];
}

Wait for DOM updates after state changes.

count.value++;
await nextTick();
console.log(el.value.textContent);

Map through words and capitalize.

const cap = s => s.split(' ').map(w => w[0].toUpperCase() + w.slice(1)).join(' ');

Standard recursive or iterative approach.

const fib = n => n <= 1 ? n : fib(n-1) + fib(n-2);

Split and reduce to find max length.

const longest = s => s.split(' ').reduce((a, b) => b.length > a.length ? b : a);

Pass SVG paths as props.

<template>
  <svg><path :d="iconPath" /></svg>
</template>

Use `draggable` attribute and `dragstart/drop` events.

<div draggable="true" @dragstart="handleDrag">

Recursive comparison of keys and values.

const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);

Link a single property to a new ref.

const name = toRef(user, 'name');

Observe a sentinel element at the bottom of the list.

new IntersectionObserver(([e]) => {
  if(e.isIntersecting) loadMore();
}).observe(sentinel.value);

Use `Math.max` with spread.

const max = arr => Math.max(...arr);

Define state, getters, and actions.

export const useStore = defineStore('main', {
  state: () => ({ count: 0 }),
  actions: { increment() { this.count++ } }
});

Access files from a file input change event.

const onFile = e => { const file = e.target.files[0]; };

Click listener that adds a temporary expanding circle to the DOM.

mounted(el) { el.onclick = e => { ... } }

Sum divided by length.

const avg = arr => arr.reduce((a, b) => a + b, 0) / arr.length;

Handle non-blocking data fetching easily.

const { state, isReady } = useAsyncState(fetchData());

Random number to hex string.

const color = () => '#' + Math.floor(Math.random()*16777215).toString(16);

Convert to string, reverse, and back to number.

const rev = n => parseFloat(n.toString().split('').reverse().join('')) * Math.sign(n);

Teleport to a dedicated container outside the app overflow.

<Teleport to="body"><Toast /></Teleport>

An object with events and subscribe/publish methods.

const bus = { events: {}, emit(n, d) { ... }, on(n, f) { ... } };

Subtract actual sum from expected sum.

const missing = arr => (100 * 101 / 2) - arr.reduce((a,b)=>a+b);

Provide the theme ref at the top and inject it in components.

provide('theme', themeRef);

Use Intersection Observer to swap data-src to src.

mounted(el) { observer.observe(el); }

Modulo for 3, 5, or both.

for(let i=1;i<=15;i++) console.log((i%3?'':'Fizz')+(i%5?'':'Buzz')||i);

Regex match length.

const count = s => (s.match(/[aeiou]/gi) || []).length;

Pass the signal to fetch and call abort on unmount.

const ctrl = new AbortController(); fetch(u, { signal: ctrl.signal });

Object.keys length check.

const empty = o => Object.keys(o).length === 0;

Re-order the array based on a key and direction.

const sort = (key) => items.value.sort((a,b) => a[key] > b[key] ? 1 : -1);

Easily sync a prop with a local ref for `v-model` binding.

const data = useVModel(props, 'modelValue', emit);

Fisher-Yates shuffle algorithm.

const shuffle = arr => arr.sort(() => Math.random() - 0.5);

Check divisibility up to sqrt(n).

const isPrime = n => { for(let i=2; i<=Math.sqrt(n); i++) if(n%i===0) return false; return n > 1; };

Watch window resize event and update width/height refs.

window.onresize = () => { w.value = window.innerWidth; };

Regex string replacement.

const toCamel = s => s.replace(/_([a-z])/g, m => m[1].toUpperCase());

Create and position a floating div on mouseover.

mounted(el) { el.onmouseenter = ... }

Expose 'open' and 'close' methods to the parent.

defineExpose({ open: () => (show.value = true) });