Mockpreps
🧑💼
🪴
Login now and master your exams with Mockpreps’ mock tests!
Top Interview Questions
Vue.js (commonly referred to as Vue) is a modern JavaScript framework used for building user interfaces and single-page applications (SPAs). Created by Evan You and first released in 2014, Vue has grown rapidly in popularity due to its simplicity, flexibility, and performance. It is designed to be approachable for beginners while still being powerful enough for large-scale applications. Vue focuses mainly on the “view” layer of an application, which makes it easy to integrate with other libraries or existing projects.
Before understanding Vue.js, it is important to understand what a JavaScript framework is. A JavaScript framework provides a structured way to build interactive web applications. Instead of writing plain JavaScript from scratch, developers use frameworks to manage data, handle user interactions, and update the web page efficiently. Frameworks like Vue, React, and Angular help developers create complex applications more easily and with fewer errors.
Vue stands out because it combines the best features of other frameworks while keeping its learning curve gentle.
One of Vue’s most important features is reactive data binding. This means that when the data in an application changes, the user interface updates automatically. Developers do not need to manually update the DOM (Document Object Model). Vue tracks data changes and efficiently updates only the parts of the page that need to change.
For example, if a variable connected to the UI changes, Vue instantly reflects that change on the screen. This makes applications faster and easier to manage.
Vue uses a component-based structure, where the user interface is divided into reusable components. Each component contains its own HTML, CSS, and JavaScript logic. This approach improves code organization, readability, and reusability.
For example, a website might have separate components for:
Navigation bar
Footer
User profile
Buttons
These components can be reused across different pages, saving time and effort.
Vue uses a Virtual DOM, which is a lightweight copy of the real DOM. When data changes, Vue first updates the Virtual DOM and then compares it with the real DOM. Only the necessary changes are applied, which improves performance and makes applications faster and smoother.
Vue provides built-in directives, which are special HTML attributes that add functionality to elements. Examples include:
v-if for conditional rendering
v-for for looping through lists
v-bind for binding attributes
v-model for two-way data binding
These directives make templates more powerful and expressive while remaining easy to read.
Vue offers excellent development tools that make building applications easier. The Vue CLI (Command Line Interface) allows developers to quickly create and configure new Vue projects. It sets up essential tools such as:
Webpack or Vite
Hot module reloading
Linting
Build optimization
Vue also has a dedicated browser extension called Vue Devtools, which helps developers inspect components, track state changes, and debug applications efficiently.
Vue is more than just a core library; it has a rich ecosystem of official tools and libraries.
Vue Router is used to create navigation in single-page applications. It allows developers to define routes that map URLs to specific components. This enables smooth page transitions without reloading the browser.
For managing shared application data, Vue uses Pinia (the modern replacement for Vuex). State management is useful when multiple components need access to the same data, such as user information or theme settings.
Nuxt.js is a framework built on top of Vue that simplifies server-side rendering (SSR) and static site generation. It improves performance, SEO, and overall developer experience, especially for large projects.
One of Vue’s biggest advantages is its easy learning curve. Developers who already know HTML, CSS, and basic JavaScript can start using Vue quickly. Vue’s syntax feels familiar because it stays close to standard web technologies.
Vue also offers two main API styles:
Options API (more beginner-friendly)
Composition API (more flexible and scalable)
This allows developers to grow with the framework as their skills improve.
Vue is known for being lightweight and fast. Its efficient rendering system ensures that applications perform well even as they grow in complexity. Vue’s small size also means faster load times, which improves user experience, especially on slower devices or networks.
Vue has a large and active community worldwide. It is widely used by startups, individual developers, and large companies. Many learning resources are available, including documentation, tutorials, forums, and online courses.
The official Vue documentation is often praised for being clear, well-organized, and beginner-friendly. This strong community support makes it easier for developers to find help and best practices.
Some major advantages of Vue include:
Easy to learn and use
Clear and readable syntax
High performance
Flexible and scalable
Excellent documentation
Strong community support
These benefits make Vue a great choice for both small projects and large applications.
Although Vue is powerful, it does have some limitations:
Smaller job market compared to React
Fewer third-party libraries than older frameworks
Rapid updates may require developers to keep learning
However, these limitations are becoming less significant as Vue continues to grow in popularity.
Answer:
Vue.js is a progressive JavaScript framework used to build user interfaces (UI) and single-page applications (SPAs).
Created by Evan You
Focuses mainly on the view layer
Easy to integrate with existing projects
Uses HTML, CSS, and JavaScript
✅ Example use: Creating dynamic forms, dashboards, and interactive web apps.
Answer:
Main features of Vue.js are:
Reactive Data Binding
Automatically updates the UI when data changes
Component-Based Architecture
UI is divided into reusable components
Virtual DOM
Improves performance by minimizing direct DOM updates
Directives
Special attributes like v-if, v-for, v-bind
Computed Properties & Watchers
For handling dynamic data logic
Answer:
A Vue instance is the root object of a Vue application created using new Vue() or createApp().
It connects:
Data
Methods
HTML template
Example (Vue 3):
const app = Vue.createApp({ data() { return { message: "Hello Vue" } } }) app.mount("#app")
Answer:
Data binding means connecting data with the UI so that changes in one reflect in the other.
One-way binding
Data → View
Two-way binding
Data ↔ View (using v-model)
Example:
<input v-model="name"> <p>{{ name }}</p>
Answer:
Directives are special HTML attributes that start with v- and tell Vue how to manipulate the DOM.
| Directive | Purpose |
|---|---|
| v-if | Conditional rendering |
| v-for | Looping |
| v-bind | Bind attributes |
| v-model | Two-way binding |
| v-on | Event handling |
v-if and v-show? Difference?Answer:
| v-if | v-show |
|---|---|
| Adds/removes element from DOM | Uses CSS (display:none) |
| Slower initial load | Faster toggle |
| Used when condition rarely changes | Used when toggling often |
v-for?Answer:
v-for is used to render a list of items.
Example:
<li v-for="item in items" :key="item.id"> {{ item.name }} </li>
Answer:
Components are reusable, independent blocks of UI.
Benefits:
Reusability
Better code organization
Easier maintenance
Example:
Header component
Footer component
Login component
Answer:
A .vue file that contains:
<template> <!-- HTML --> </template> <script> <!-- JavaScript --> </script> <style> <!-- CSS --> </style>
This keeps code organized and readable.
Answer:
Props are custom attributes used to pass data from parent to child component.
Example:
<child-component title="Hello"></child-component>
props: ['title']
Props are read-only inside child components.
v-model?Answer:
v-model creates two-way data binding between form input and data.
Example:
<input v-model="email">
Answer:
Computed properties are used for calculated values based on reactive data.
Cached
Efficient
Automatically updated
Example:
computed: { fullName() { return this.firstName + " " + this.lastName } }
Answer:
Watchers monitor data changes and perform actions.
Used when:
API calls
Complex logic on data change
Example:
watch: { count(newValue) { console.log(newValue) } }
| Computed | Watch |
|---|---|
| Used for derived values | Used for side effects |
| Cached | Not cached |
| Simple logic | Complex operations |
Answer:
Virtual DOM is a lightweight copy of the real DOM.
Steps:
Change in data
Virtual DOM updated
Only changed parts updated in real DOM
This improves performance 🚀
Answer:
Vue Router is used for navigation in single-page applications.
Example routes:
/login
/dashboard
/profile
Answer:
Vuex is a state management library.
Used when:
Multiple components share data
Key parts:
State
Mutations
Actions
Getters
Answer:
Lifecycle hooks are methods that run at different stages of a component.
Common hooks:
created()
mounted()
updated()
unmounted()
mounted()?Answer:
mounted() runs after the component is added to the DOM.
Used for:
API calls
DOM access
Answer:
Easy to learn
Simple syntax
Fast performance
Strong community
Great documentation
Answer:
| Vue 2 | Vue 3 |
|---|---|
| Options API only | Options API + Composition API |
| Slower performance | Faster (better Virtual DOM) |
| No Fragment support | Supports Fragments |
| Limited TypeScript support | Excellent TypeScript support |
| Larger bundle size | Smaller bundle size |
Answer:
Composition API is a new way to organize logic in Vue 3 using functions like:
ref()
reactive()
computed()
watch()
It improves:
Code reusability
Readability for large projects
ref in Vue 3?Answer:
ref() is used to create reactive variables.
Example:
import { ref } from 'vue' const count = ref(0) count.value++
Access value using .value.
reactive()?Answer:
reactive() is used to make objects reactive.
Example:
const user = reactive({ name: 'John', age: 25 })
ref and reactive?| ref | reactive |
|---|---|
| Used for primitive values | Used for objects |
Access using .value |
No .value |
| Can hold any data type | Only objects |
emit in Vue?Answer:
emit is used to send data from child to parent component.
Example:
this.$emit('saveData', data)
Answer:
Slots allow passing HTML content from parent to child components.
Types:
Default Slot
Named Slot
Scoped Slot
Answer:
A scoped slot allows the child component to pass data back to the parent while rendering content.
Used when:
Parent needs access to child data
key in Vue?Answer:
key is a special attribute used with v-for to uniquely identify elements.
Benefits:
Improves performance
Helps Vue track changes correctly
v-bind?Answer:
v-bind dynamically binds HTML attributes to data.
Example:
<img v-bind:src="imageUrl">
Shortcut:
<img :src="imageUrl">
v-on?Answer:
v-on listens to DOM events.
Example:
<button v-on:click="submitForm">Submit</button>
Shortcut:
<button @click="submitForm">Submit</button>
Answer:
Event modifiers change event behavior.
Common modifiers:
.prevent
.stop
.once
.self
Example:
<form @submit.prevent="save">
v-html?Answer:
v-html renders raw HTML inside an element.
⚠️ Warning: Can cause XSS attacks if misused.
v-cloak?Answer:
v-cloak hides uncompiled Vue templates until Vue is ready.
Used to prevent:
Flash of unrendered content
Answer:
Mixins are a way to reuse code across components.
⚠️ Disadvantage:
Name conflicts
Hard to debug
(Vue 3 prefers Composition API instead.)
nextTick()?Answer:
nextTick() executes code after DOM updates.
Used when:
You need updated DOM values
Answer:
Custom directives allow you to create your own DOM behavior.
Example use:
Auto-focus
Tooltip
Answer:
Lazy loading loads components only when needed.
Benefits:
Faster initial load
Better performance
Used with Vue Router.
keep-alive?Answer:
keep-alive caches inactive components instead of destroying them.
Used for:
Tabs
Navigation
Answer:
SSR renders Vue pages on the server instead of browser.
Benefits:
Better SEO
Faster first page load
Example framework:
Nuxt.js
Answer:
Nuxt.js is a Vue framework for:
SSR
Static site generation
Routing
SEO optimization
Answer:
Teleport moves a component’s HTML to another part of the DOM.
Used for:
Modals
Popups
Answer:
Fragments allow multiple root elements in a component template (Vue 3).
Answer:
Form handling uses:
v-model
Event handling
Validation logic
Answer:
Using:
v-if
v-else
v-show
provide and inject?Answer:
Used to share data across deeply nested components without props.
$refs?Answer:
$refs gives direct access to DOM elements or components.
Used sparingly.
Answer:
Two-way binding can:
Make debugging harder
Create unintended data changes
App.vue?Answer:
App.vue is the root component of a Vue app.
Answer:
Use computed properties
Lazy load components
Use key properly
Avoid unnecessary watchers
1. Explain Vue’s reactivity system in Vue 3.
Answer:
Vue 3 uses a Proxy-based reactivity system instead of Object.defineProperty.
Tracks dependencies at runtime
Automatically reacts to property addition/deletion
More efficient than Vue 2
Flow:
reactive() / ref() creates reactive state
effect() tracks dependencies
When state changes → triggers updates
Answer:
| Options API | Composition API |
|---|---|
| Easier for beginners | Better for large-scale apps |
| Logic split by options | Logic grouped by feature |
| Less reusable | Highly reusable via composables |
👉 Use Composition API for:
Large applications
Shared logic
Better TypeScript support
Answer:
Logic scattering across lifecycle hooks
Difficult code reuse (mixins)
Poor scalability in large components
Answer:
Composables are reusable functions that use Vue’s reactive APIs.
Example use cases:
Authentication
Form handling
API calls
They replace mixins.
ref, reactive, shallowRef, and shallowReactive.Answer:
| API | Description |
|---|---|
| ref | Reactive primitive |
| reactive | Deep reactive object |
| shallowRef | Only top-level reactive |
| shallowReactive | Shallow object reactivity |
Used for performance optimization.
Answer:
Props + emits (parent-child)
Provide / inject (deep trees)
Global state (Pinia)
Event bus (not recommended)
Answer:
Props → parent → child
Emits → child → parent
Provide/Inject → deeply nested components
Answer:
Feature-based folder structure
Composables for shared logic
Pinia for state
Lazy-loaded routes
Global error handling
Answer:
Simpler API
Type-safe
Modular by default
No mutations required
Answer:
Use actions
Handle loading/error states
Centralize API logic
Answer:
Lazy loading routes/components
Use computed over watch
Avoid deep watchers
Use v-memo (Vue 3)
Use key properly
Debounce expensive events
v-memo?Answer:
v-memo skips unnecessary re-renders when dependencies haven’t changed.
Used in large lists.
watch and watchEffect?Answer:
| watch | watchEffect |
|---|---|
| Explicit source | Auto dependency tracking |
| Lazy by default | Runs immediately |
| Better for specific data | Good for side effects |
Answer:
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted
nextTick()?Answer:
When you need DOM updates after state changes (e.g., focus, scroll).
Answer:
Global guards
Per-route guards
In-component guards
Used for authentication & authorization.
Answer:
Dynamic params
Lazy loading
Role-based routes
Answer:
HTML rendered on server
Faster first paint
Search engines can index content
Answer:
XSS via v-html
Insecure API handling
Token storage in localStorage
Mitigation:
Sanitize HTML
Use HttpOnly cookies
CSP headers
Answer:
Unit testing: Vitest / Jest
Component testing: Vue Test Utils
E2E testing: Cypress / Playwright
Answer:
Use composables
Schema validation (Yup/Zod)
Debounced validation
Controlled components
Answer:
app.config.errorHandler
Axios interceptors
Centralized logging
Answer:
Role-based routing
Permission directives
Backend-driven permissions
Answer:
Use Vue Compatibility Build
Migrate incrementally
Replace Vuex with Pinia
Refactor mixins to composables
Answer:
Code reviews
Pair programming
Documentation
Best practices enforcement
Answer:
Profiling (Vue DevTools)
Monitoring (Sentry)
Code splitting
Bundle analysis
Answer:
Vue tracks dependencies using a reactivity graph.
Reactive state is wrapped with Proxy
Each property access is tracked inside an active effect
On mutation, Vue triggers only dependent effects
This minimizes unnecessary re-renders.
effect() in Vue reactivity?Answer:
effect() is an internal function that:
Collects dependencies
Re-runs when reactive data changes
Vue’s computed, watch, and render functions are built on top of it.
computed and computed(get/set)?Answer:
Getter only → read-only computed
Getter + Setter → two-way computed value
Used when you want controlled updates.
Answer:
Batches updates using a job queue
Prevents recursive effect execution
Limits max update depth
Answer:
Virtual DOM diffing
Key-based node reuse
Patch flags (Vue 3 compiler optimization)
Answer:
Patch flags are compiler hints telling Vue what parts of the DOM are dynamic.
Benefits:
Faster diffing
Smaller runtime cost
v-if, v-show, and dynamic components?Answer:
v-if → conditional DOM creation
v-show → CSS-based toggle
Dynamic components → runtime component switching
Answer:
Virtual scrolling
Pagination
Memoization (v-memo)
Avoid deep watchers
Answer:
Container → logic & data
Presentational → UI only
Improves testability and reusability.
Answer:
Composables
Pinia stores
Utility modules
Avoid mixins.
provide/inject instead of state management?Answer:
For scoped dependency sharing
Theme, config, form context
Not suitable for global state.
Answer:
Domain-based stores
Small, focused stores
Composition inside stores
Answer:
Update UI immediately
Rollback on API failure
Track previous state
Answer:
Normalize API responses
Cache server data
Use background revalidation
Answer:
Isolated routers per app
Shared navigation shell
Route-based lazy loading
Answer:
Catch-all routes
Global error layouts
Redirect rules
Answer:
scrollBehavior in router
Save/restore scroll position
Answer:
Occurs when server-rendered HTML doesn’t match client DOM.
Causes:
Browser-only APIs
Random values
Time-based rendering
Answer:
Server caching
Payload reduction
Dynamic imports
Nitro optimizations
Answer:
Isolate logic
Mock dependencies
Test reactive state changes
Answer:
Unit → single component
Integration → component interaction
E2E → full user flow
Answer:
Mock Axios
Use MSW
Dependency injection
Answer:
HttpOnly cookies
CSRF protection
Avoid localStorage for sensitive tokens
Answer:
Cleanup watchers
Clear intervals/timeouts
Remove event listeners
Proper unmounting
Answer:
Vue DevTools profiler
Browser performance tab
Bundle analysis
Answer:
Centralized logging (Sentry)
Environment-based logging
Error boundaries
Answer:
ESLint + Prettier
Code reviews
Shared conventions
Answer:
Component responsibility
Reactivity misuse
Performance issues
Test coverage
Answer:
Incremental upgrades
Feature flags
Compatibility build
Answer:
Translate technical benefits into business impact
Performance, maintainability, scalability
