Vue Interview Questions

Comprehensive Vue.js interview questions covering fundamentals, reactivity, Composition API, and advanced topics:

Fundamentals

1. What is Vue.js and why use it?

Vue.js is a progressive JavaScript framework for building user interfaces. It's designed to be incrementally adoptable, with a core library focused on the view layer. It's approachable, versatile, and performant with a gentle learning curve.

2. What is the difference between ref() and reactive()?

• ref(): Works with primitives and objects, requires .value in JS

• reactive(): Only for objects, direct property access

• ref() can be reassigned, reactive() cannot

3. What is the Composition API?

The Composition API is a set of APIs that allows you to author Vue components using imported functions instead of declaring options. It enables better code organization, reusability, and TypeScript support.

4. What is the difference between v-if and v-show?

• v-if: True conditional rendering, elements added/removed from DOM

• v-show: CSS-based toggle, element always in DOM

• Use v-if for infrequent toggles, v-show for frequent

5. What are Vue lifecycle hooks?

Lifecycle hooks are functions called at specific stages: onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted. They allow you to run code at different points in a component's lifecycle.

Reactivity & Composition API

6. How does Vue's reactivity work?

Vue 3 uses ES6 Proxies to track property access and modifications. When you access a reactive property, Vue tracks it as a dependency. When you modify it, Vue triggers updates to all dependent components and computed properties.

7. When to use watch() vs watchEffect()?

• watch(): Explicit about dependencies, access old and new values

• watchEffect(): Automatic dependency tracking, runs immediately

• Use watch() when you need the previous value or lazy execution

8. What are composables?

Composables are functions that leverage the Composition API to encapsulate and reuse stateful logic. They follow the naming convention of starting with "use" and can call other composables.

Components & Communication

9. How do you pass data from parent to child?

Use props. Define them with defineProps() in the child component and pass them as attributes in the parent template.

10. How do you pass data from child to parent?

Use custom events with defineEmits(). The child emits events with data, and the parent listens with @ (v-on).

11. What is provide/inject?

provide/inject allows ancestor components to provide data to all descendants without prop drilling. The ancestor uses provide() and descendants use inject().

12. What are slots and when to use them?

Slots allow parents to pass template content to children. Use named slots for multiple content areas and scoped slots to pass data from child to parent template.

Routing & State

13. What is Vue Router?

Vue Router is the official routing library for Vue.js. It enables navigation between different views, handles browser history, and supports nested routes, lazy loading, and navigation guards.

14. What is Pinia?

Pinia is the official state management library for Vue. It provides a simpler API than Vuex, better TypeScript support, and works seamlessly with the Composition API.

15. Pinia vs Vuex - what are the differences?

• Pinia: Simpler API, no mutations, better TypeScript

• Vuex: Legacy, requires mutations, more boilerplate

• Pinia is recommended for new projects

Performance

16. How do you optimize Vue applications?

• Use v-once for static content

• Use v-memo to memoize template sub-trees

• Lazy load routes and components

• Use virtual scrolling for large lists

• Prefer computed over methods for derived data

17. What is the Virtual DOM in Vue?

Vue uses a Virtual DOM to optimize rendering. It creates a JavaScript representation of the DOM, diffs changes, and applies minimal updates to the real DOM for better performance.

Advanced Topics

18. What are navigation guards?

Navigation guards are hooks that allow you to control navigation. Types include: global guards (beforeEach, afterEach), per-route guards (beforeEnter), and in-component guards (onBeforeRouteLeave, onBeforeRouteUpdate).

19. What are custom directives?

Custom directives allow you to directly manipulate the DOM. They have lifecycle hooks like mounted, updated, and unmounted. Use them for low-level DOM operations like focus management or third-party library integration.

20. What is Teleport?

Teleport allows you to render component template in a different part of the DOM tree, useful for modals, tooltips, and notifications that need to break out of their parent container.

21. What is Suspense?

Suspense allows you to handle async dependencies in component trees. It shows fallback content while waiting for async components to load, providing a better loading experience.

22. What is the difference between Options API and Composition API?

• Options API: data(), methods, computed, traditional approach

• Composition API: setup(), ref(), reactive(), better for code organization

• Composition API is recommended for new projects

Practical Scenarios

23. How do you handle forms in Vue?

Use v-model for two-way binding, reactive() or ref() for form state, and computed() for validation. Libraries like VeeValidate can help with complex forms.

24. How would you implement authentication?

Create an auth store with Pinia, use navigation guards to protect routes, store tokens in localStorage/cookies, and provide user data via provide/inject or the store.

25. How do you handle API calls in Vue?

Use composables with watchEffect() or onMounted(), libraries like VueQuery (TanStack Query for Vue), or create dedicated API services. Handle loading and error states with reactive refs.

26. What is $nextTick and when to use it?

$nextTick() waits for the next DOM update cycle. Use it when you need to access updated DOM after data changes, especially when measuring elements or setting focus.

Common Pitfalls

27. Why does destructuring props lose reactivity?

Destructuring extracts primitive values, breaking the reactive connection. Use toRefs() to maintain reactivity when destructuring: const { count } = toRefs(props).

28. What are common Vue anti-patterns?

• Mutating props directly

• Using v-if and v-for on the same element

• Not providing keys in v-for

• Overusing watchers instead of computed

• Making everything reactive when not needed

29. How do you optimize a large list?

Use virtual scrolling with vue-virtual-scroller, v-memo on list items, computed() to filter/sort data, and consider pagination or infinite scroll.

30. What is the difference between computed and methods?

Computed properties are cached and only re-evaluate when dependencies change. Methods run every time they're called. Use computed for derived data, methods for actions.