Vue Js Interview Questions

Vue.js is a progressive JavaScript framework for building user interfaces and single-page applications. It uses a reactive data binding system and a component-based architecture.

• Composition API for better logic reuse
• Improved TypeScript support
• Smaller bundle size
• Better performance
• Teleport for DOM manipulation outside Vue root
• Fragments (multiple root nodes in a component)
• Security & Identity (Azure Active Directory)

The Composition API allows developers to organize and reuse logic more flexibly by using functions like setup(), ref(), reactive(), and computed() instead of the Options API.

• ref() is used to create a reactive primitive value or an object with a .value property.
• reactive() makes an entire object reactive and returns a reactive proxy.

Vue uses a reactive system based on ES6 Proxies (in Vue 3) or Object.defineProperty (Vue 2) to track dependencies and trigger view updates when reactive data changes.

Directives are special attributes with the v- prefix in Vue templates that apply reactive behavior to the DOM, such as v-if, v-for, v-model, v-bind, and v-on.

v-model creates two-way data binding on form inputs or custom components by syncing a value prop and an event (usually input or update:modelValue).

A Vue component is a reusable and encapsulated block of UI with its own template, logic, and styles, allowing modular app structure.

Vue Router is the official router for Vue.js, enabling navigation between different components/pages with URL-based routing in single-page applications.

• Parent to child: Props
• Child to parent: Events with $emit()

Vuex is the official state management library for Vue.js, providing a centralized store and predictable state mutations for large applications.

Lifecycle hooks are methods called at different stages of a component’s life, like created(), mounted(), updated(), and unmounted().

• Use lazy loading for components
• Use v-once directive for static content
• Use key attribute in lists
• Use computed properties instead of methods for expensive operations
• Avoid unnecessary watchers

A watcher observes a reactive data source and runs a callback when the data changes, useful for asynchronous or expensive operations.

• computed properties are cached based on dependencies and only re-evaluate when needed.
• methods are called every time they are invoked without caching.

Slots allow you to pass content from a parent component into a child component's template, enabling flexible and reusable components.

Event modifiers like .stop, .prevent, .capture modify event behavior directly in the template, e.g., v-on:click.stop stops event propagation.

• v-if conditionally renders or destroys the DOM elements.
• v-show toggles the visibility by changing the CSS display property but keeps elements in the DOM.

Vue 3 has built-in TypeScript support. You can define component props and state with types and use the Composition API for better typing.

• Use components for modularity
• Use the Composition API for reusable logic
• Keep templates clean and simple
• Use Vue DevTools for debugging
• Manage state properly with Vuex or Pinia
• Write unit tests for components