Vue.js Quiz ( Intermediate ) - All Questions

This intermediate Vue.js quiz is designed for developers who know Vue basics and want to strengthen real-world skills. It focuses on component communication, computed vs watchers, lifecycle hooks, Vue Router, Vuex basics, performance concepts, and common interview scenarios.

Question 1: What is the main difference between computed properties and methods?

Methods are cached
Computed properties are cached
Methods are reactive
Computed properties are asynchronous

Explanation: Computed properties are cached based on their dependencies.

Question 2: When should you use a watcher instead of a computed property?

For synchronous calculations
For derived state
For performing side effects on data change
For template rendering

Explanation: Watchers are best for reacting to data changes with side effects.

Question 3: Which lifecycle hook is best for making API calls?

beforeCreate
created
beforeMount
destroyed

Explanation: created is commonly used for fetching initial data.

Question 4: Which lifecycle hook guarantees DOM access?

created
beforeCreate
mounted
updated

Explanation: mounted runs after the component is attached to the DOM.

Question 5: What problem does the key attribute solve in v-for?

Memory leaks
DOM reuse issues
Event binding
Conditional rendering

Explanation: Keys help Vue efficiently track and reuse DOM elements.

Question 6: What happens if a key is not provided in v-for?

App crashes
Vue renders nothing
Vue uses index-based tracking
Performance improves

Explanation: Vue falls back to index-based DOM tracking.

Question 7: Which feature enables navigation between views?

Vuex
Vue Router
Vue CLI
Vue Devtools

Explanation: Vue Router manages client-side routing.

Question 8: Which component renders matched routes?

<router-view>
<router-link>
<view-router>
<route-outlet>

Explanation: router-view displays matched route components.

Question 9: What is <router-link> used for?

API calls
Navigation links
Component loading
State updates

Explanation: router-link creates navigational links.

Question 10: Which mode removes the # from URLs?

Hash mode
Memory mode
History mode
Server mode

Explanation: History mode provides clean URLs.

Question 11: What is the main risk of history mode?

Slower routing
Server configuration required
Broken components
SEO issues

Explanation: Server must handle fallback routing.

Question 12: What is Vuex primarily used for?

Routing
State management
UI rendering
Form validation

Explanation: Vuex manages centralized application state.

Question 13: Which Vuex property holds application state?

actions
getters
state
mutations

Explanation: State stores the application data.

Question 14: Which Vuex property updates state synchronously?

actions
mutations
getters
modules

Explanation: Mutations must be synchronous.

Question 15: Which Vuex property handles async logic?

getters
state
actions
mutations

Explanation: Actions handle asynchronous operations.

Question 16: What is a Vuex getter?

State updater
Async handler
Derived state
Component mapper

Explanation: Getters compute derived state.

Question 17: Why are Vuex mutations synchronous?

Performance reasons
Debugging and state tracking
Simpler syntax
Avoid promises

Explanation: Sync mutations enable predictable state tracking.

Question 18: What problem does props validation solve?

Performance tuning
Type safety and correctness
Routing errors
State mutation

Explanation: Prop validation ensures correct data usage.

Question 19: Which prop option defines default values?

type
required
default
validator

Explanation: default provides fallback values.

Question 20: What does emit accomplish?

Update props
Send events to parent
Modify state
Trigger routing

Explanation: emit sends custom events upward.

Question 21: What is the main drawback of mutating props?

Syntax errors
Unpredictable data flow
Slower rendering
Memory leaks

Explanation: Props mutation breaks one-way data flow.

Question 22: Which Vue feature improves performance in large lists?

v-show
computed
virtual DOM diffing with keys
watch

Explanation: Keys optimize virtual DOM updates.

Question 23: What is the purpose of keep-alive?

Cache API responses
Cache component instances
Prevent routing
Improve security

Explanation: keep-alive caches inactive components.

Question 24: Which lifecycle hooks are triggered by keep-alive?

created/destroyed
activated/deactivated
mounted/unmounted
updated/rendered

Explanation: activated and deactivated run with keep-alive.

Question 25: What is slot primarily used for?

Routing
Content distribution
State sharing
Event handling

Explanation: Slots allow flexible content injection.

Question 26: What is a scoped slot?

Global slot
Slot with child-to-parent data
CSS scoped slot
Private slot

Explanation: Scoped slots expose child data to parent.

Question 27: Which directive dynamically applies classes?

v-if
v-show
v-bind:class
v-for

Explanation: v-bind:class applies dynamic classes.

Question 28: What is the Composition API mainly used for?

Simpler templates
Better logic reuse and organization
Routing management
Styling

Explanation: Composition API improves logic reuse.

Question 29: Which function defines reactive state in Composition API?

computed()
watch()
ref()
emit()

Explanation: ref creates reactive state.

Question 30: What does reactive() do?

Create immutable data
Create reactive objects
Handle async logic
Define watchers

Explanation: reactive makes objects reactive.

Question 31: What is the main benefit of Composition API over Options API?

Less code
Better performance always
Improved code organization
Simpler syntax

Explanation: It groups logic by feature.

Question 32: Which hook replaces created and mounted in Composition API?

setup()
init()
bootstrap()
compose()

Explanation: setup runs before component creation.

Question 33: Which Vue feature enables two-way binding in components?

v-bind
emit
v-model
props

Explanation: v-model enables two-way binding.

Question 34: How does v-model work internally?

Props only
Events only
Prop + event combination
Computed properties

Explanation: v-model uses prop and emit.

Question 35: What is the purpose of nextTick?

Delay routing
Wait for DOM updates
Schedule API calls
Handle errors

Explanation: nextTick waits for DOM updates.

Question 36: Which scenario requires nextTick?

Before data change
After DOM update logic
Before API call
During initialization

Explanation: DOM updates are async.

Question 37: What does provide/inject enable?

Routing
Dependency sharing across component tree
State mutation
Event bubbling

Explanation: provide/inject shares dependencies.

Question 38: What is the risk of overusing watchers?

Slower routing
Performance overhead
Broken reactivity
Template errors

Explanation: Too many watchers affect performance.

Question 39: Which Vue feature improves maintainability in large apps?

Global components
Vuex modules
Inline logic
Two-way binding everywhere

Explanation: Vuex modules organize state.

Question 40: Which command builds Vue app for production?

vue serve
vue build
npm run build
vue compile

Explanation: npm run build creates production build.

Question 41: What is tree-shaking in Vue?

Removing unused components
Removing unused code
Optimizing DOM
Reducing API calls

Explanation: Tree-shaking removes unused code.

Question 42: Which tool is commonly used for Vue debugging?

Chrome DevTools
Vue Devtools
Webpack
Babel

Explanation: Vue Devtools helps debug Vue apps.

Question 43: What is the main architectural advantage of Vue?

Strict structure
Flexibility and progressive adoption
Heavy tooling
Backend integration

Explanation: Vue is flexible and progressively adoptable.

Question 44: Which practice improves Vue performance the most?

Using watchers
Avoiding unnecessary reactivity
Using v-if everywhere
Inline functions in template

Explanation: Reducing reactive overhead improves performance.

Question 45: What is the ultimate goal of Vue.js?

Backend development
Flexible and maintainable UI development
Database management
Testing automation

Explanation: Vue aims to simplify UI development.

Back to programming Quizzes

Vue.js Quiz ( Intermediate )

Questions

~10

Minutes

Min Limit