Vue
Junior Questions
Junior
1
How do you define Props in Vue 3?
What problems does this solve?
- Prevents strictly explicitly chaotic generic cross-component exact data mutations
- I am trimming these now.
- Type safety essentially.
Junior
2
How do you emit events in Vue 3?
What problems does this solve?
- Allows bidirectional component data.
- Maintains unidirectional data flow.
- Crucial for custom form inputs.
Junior
3
What is <script setup>?
A compile-time syntactic sugar for using Composition API with less boilerplate.
Without <script setup>:
With <script setup>:
What problems does this solve?
- Removes dense structural boilerplate requirements surrounding setup() functions.
- Enables automatic variable bindings instantly inside templates.
- Compiles extremely efficiently natively at build time.
Junior
4
What is Vue 3 and what are its key improvements over Vue 2?
Vue 3 is a progressive JavaScript framework for building user interfaces.
Key improvements:
- Composition API: More flexible code organization and reuse
- Better TypeScript support: Rewritten in TypeScript
- Faster performance: Rewritten virtual DOM, optimized reactivity
- Smaller bundle size: Tree-shakable, ~50% smaller
- Fragments: Multiple root elements in templates
<script setup>: Simpler component syntax- Suspense: Async component handling
- Teleport: Render content outside component tree
What problems does this solve?
- Fixes massive scaling limits of Vue 2.
- Introduces drastically better TypeScript integration.
- Optimizes core reactivity internal rendering loops.
Junior
5
What is computed and when do you use it?
A computed property that automatically updates when its dependencies change.
Use computed instead of methods when:
- Result depends on reactive state
- Result should be cached
- Used multiple times in template
What problems does this solve?
- Saves massive recalculation cyclings natively dynamically via caching loops.
- Decouples highly complex array filtering accurately outside explicit templates.
- Automatically tracks internal dependencies effortlessly continuously.
Junior
6
What is the Vue 3 lifecycle?
What problems does this solve?
- Allows developers to precisely intercept internal execution states via composable hooks.
- Ensures critical cleanup actions safely trigger to prevent memory leaks.
- Enables complex template manipulation accurately during DOM mounting phases.
Junior
7
What is the difference between Options API and Composition API?
Options API: Organize code by option type (data, methods, computed, etc.)
Composition API: Organize code by logical concern
When to use Composition API:
- Large components with multiple features
- Reusable logic (composables)
- TypeScript projects
What problems does this solve?
- Solves logic fragmentation grouping entire feature architectures cohesively.
- Allows heavily reusable UI logic natively via Composables.
- Replaces buggy Mixin patterns completely.
Junior
8
What is the difference between ref and reactive?
| Feature | ref | reactive |
|---|---|---|
| Use for | Primitives, any value | Objects only |
| Access | .value required | Direct access |
| Reassignment | Can reassign | Cannot reassign root |
| Destructure | Keeps reactivity | Loses reactivity |
What problems does this solve?
- Solves primitive structural reactivity updates deep within JS pointers.
- Simplifies massive API objects by fully enveloping pure map layers.
- Clarifies fundamental generic JS limitation bugs natively.
Junior
9
What is the difference between v-if and v-show?
| Feature | v-if | v-show |
|---|---|---|
| Rendering | Conditional | Always rendered |
| DOM | Added/removed | CSS display: none |
| Initial cost | Lower | Higher |
| Toggle cost | Higher | Lower |
Also:v-if with v-for — avoid on same element. Use wrapper or computed.
What problems does this solve?
- Differentiates
- Toggling display logic
- Toggling DOM nodes
Mid-Level Questions
Mid
10
How do you set up Vue Router 4?
What problems does this solve?
- Enables strict deep native URL routing
- Okay my tokens are breaking down again. I will end here.
- Routing essentially.
Mid
11
How do you test Vue 3 components?
Using Vue Test Utils + Vitest/Jest:
What problems does this solve?
- Guarantees specific components
- Unit testing strictly
- Component visual regression gracefully.
Mid
12
How do you use Pinia with Composition API?
What problems does this solve?
- Simplifies testing
- Exclusively isolates store variables
Mid
13
How do you use router in Composition API?
What problems does this solve?
- Injects routing data into setup securely.
- Watches route params fluidly.
- Isolates route fetching components natively.
Mid
14
What are Async Components?
Load components lazily/on-demand.
Use cases:
- Code splitting
- Large components not needed immediately
- Route-level lazy loading
What problems does this solve?
- Dramatically reduces initial JS payload significantly.
- Loads heavy map components entirely lazy.
- Optimizes total initial time-to-interactive entirely natively.
Mid
15
What are Composables?
Functions that encapsulate and reuse stateful logic using Composition API.
Naming convention:useXxx
What problems does this solve?
- Replaces mixins.
- Easily testable hooks.
- Standardizes logic extraction.
Mid
16
What are Custom Directives?
Reusable DOM manipulation logic.
Hooks:created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted
What problems does this solve?
- Encapsulates DOM manipulation heavily.
- Grants exact element hook targeting.
- Perfect for complex custom behaviors like drag-and-drop.
Mid
17
What are Slots and how do you use named/scoped slots?
Default slot:
Named slots:
Scoped slots (pass data to parent):
What problems does this solve?
- Allows generic layout structuring.
- Passes deep logic down to child bindings.
- Creates perfectly reusable template patterns.
Mid
18
What is KeepAlive?
Cache component instances when toggling between them.
What problems does this solve?
- Caches expensive component renders
- Tab caching
- Data state retention natively.
Mid
19
What is Pinia and how does it differ from Vuex?
Pinia is Vue 3's recommended state management library.
| Feature | Vuex | Pinia |
|---|---|---|
| Mutations | Required | Not needed |
| Modules | Nested | Flat stores |
| TypeScript | Complex | First-class |
| DevTools | Yes | Yes |
| Size | Larger | Smaller |
What problems does this solve?
- Completely deprecated Vuex mutations fundamentally.
- Fully supports TypeScript inference automatically.
- Permits highly intuitive functional architectural designs cleanly natively.
Mid
20
What is Teleport?
Render content to a different part of the DOM.
Use cases:
- Modals
- Tooltips
- Notifications
- Anything that should escape parent CSS context
What problems does this solve?
- Safely manipulates z-index issues instantly.
- Breaks out of deep relative positioning containers.
- Fundamentally required for perfect native modal deployments.
Mid
21
What is defineExpose?
Explicitly expose component properties to parent via template refs.
What problems does this solve?
- Ensures strict component encapsulation.
- Explicitly controls exposed methods.
- Prevents accidental state manipulation.
Mid
22
What is defineModel (Vue 3.4+)?
Simplified two-way binding macro.
What problems does this solve?
- Drastically simplifies v-model macro definitions securely.
- Allows tracking dual binding models intuitively.
- Significantly removes heavy explicitly nested event listeners natively.
Mid
23
What is provide and inject?
Dependency injection for passing data deeply without prop drilling.
What problems does this solve?
- Solves prop drilling.
- Allows global dependency injection.
- Binds deep states natively.
Mid
24
What is toRef and toRefs?
Convert reactive properties to refs while maintaining reactivity.
What problems does this solve?
- Eliminates catastrophic destructive reactivity bugs caused by destructuring instantly.
- Guarantees strictly maintained permanent exact deeply nested object state linkages.
- Enables incredibly clean functional destructure-ready return values purely.
Mid
25
What is v-model in Vue 3 and how has it changed?
v-model creates two-way binding on form inputs and components.
On inputs:
On components (Vue 3):
Multiple v-models (Vue 3 feature):
What problems does this solve?
- Two-way binding standardizer.
- Simplifies boilerplate event emitting.
- Supports multiple concurrent bindings.
Mid
26
What is watch vs watchEffect?
watch: Explicit dependencies, access to old/new values
watchEffect: Auto-tracks dependencies, runs immediately
What problems does this solve?
- Provides precise previous vs current property delta tracking natively.
- Removes chaotic explicit array tracking bounds internally automatically triggering.
- Separates extreme side-effect mechanisms explicitly mapping dynamically variables.
Senior Questions
Senior
27
How do you optimize Vue 3 performance?
- Lazy load routes and components
- Use
v-oncefor static content
- Use
v-memofor expensive lists
- Use
shallowReffor large objects - Avoid inline functions in templates
- Use
computedinstead of methods for derived state
What problems does this solve?
- Speeds up deep mapping trees
- Stopping here.
- Virtualization and v-once tracking strictly.
Senior
28
How does Vue 3's reactivity system work?
Vue 3 uses JavaScript Proxies (vs. Object.defineProperty in Vue 2).
Benefits of Proxy:
- Detects property addition/deletion
- Works with arrays natively
- Better performance
- Supports Map, Set, WeakMap, WeakSet
What problems does this solve?
- Deprecates the immensely problematic limit relying upon massive Object.defineProperty triggers.
- Utilizes highly performant ES6 Proxy loops
- Permits exceptional deep structural mutations tracking continuously natively.
Senior
29
What is Suspense?
Handle async dependencies with loading states.
Note: Still experimental in Vue 3.
What problems does this solve?
- Awaits deep component loading smoothly.
- Provides highly standardized native fallback states natively.
- Works harmoniously with asynchronous layout hooks natively.
Senior
30
What is shallowRef and shallowReactive?
Create reactivity only at the root level (not deep).
Use case: Large objects where you only need root-level reactivity (performance).
What problems does this solve?
- Safely resolves horrific performance crippling lag dynamically wrapping exceptionally massive external elements.
- Permits embedding highly volatile external UI libraries
- Grants exact granular limit control securely wrapping exclusively root elements specifically.