Chapter 111: Vue Quiz
Vue Quiz Time
This is not a boring list of 20 random questions with answers hidden at the bottom.
This is a guided, progressive, teacher-led Vue quiz — the kind I would run live in a classroom or workshop.
We will:
- Start with easy warm-up questions
- Gradually increase difficulty
- Mix theory + code-understanding + “spot the bug” + “write the code” style
- After each block I’ll give the correct answer + explanation + common mistakes people make
- At the end you’ll have a self-assessment score + clear next steps
Total: 30 questions divided into 5 levels (6 questions each)
Difficulty levels:
- Level 1 – Beginner (core syntax, basic reactivity)
- Level 2 – Intermediate (Composition API, components, props/emits)
- Level 3 – Mid-Advanced (lifecycle, slots, v-model on custom components, <KeepAlive>)
- Level 4 – Advanced (performance, reactivity internals, error handling, SSR)
- Level 5 – Expert / Real-project traps (very common bugs & best practices)
Ready? Let’s start — no peeking at answers until you’ve tried each block.
Level 1 – Beginner (Questions 1–6)
Q1 What is the correct way to create a reactive counter in <script setup>?
|
0 1 2 3 4 5 6 7 8 9 |
A) const count = 0 B) const count = ref(0) C) const count = reactive(0) D) let count = 0 |
Q2 What will be printed when you click the button?
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script setup> const count = ref(0) function increment() { count.value++ console.log(count) } </script> <template> <button @click="increment">{{ count }}</button> </template> |
A) 1 B) RefImpl { value: 1 } C) [object Object] D) error
Q3 Which of these lines will NOT trigger a re-render?
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script setup> const count = ref(0) const user = reactive({ name: 'Rahul', age: 28 }) const isEven = computed(() => count.value % 2 === 0) count.value++ // line 1 user.age++ // line 2 user = { name: 'Amit' } // line 3 </script> |
Q4 What is the correct shorthand for v-bind:class?
A) :class B) v-bind:class C) class: D) Both A and B
Q5 What does this code do?
|
0 1 2 3 4 5 6 |
<input v-model.trim.number="price" type="text" /> |
A) trims whitespace & converts to number B) only trims whitespace C) only converts to number D) syntax error
Q6 Which directive removes the element from DOM when condition is false?
A) v-show B) v-if C) v-cloak D) v-pre
Pause here — write your answers (1–6) before scrolling.
Answers & explanations – Level 1
- B — ref(0) is correct for primitive reactive values Common mistake: people still write reactive(0) (works but unnecessary)
- B — console.log(count) prints the ref object (RefImpl), not the number Correct way: console.log(count.value)
- C — replacing the entire reactive object breaks reactivity Vue loses the proxy reference → no more reactivity on user
- A — :class is the official shorthand v-bind:class also works but is verbose
- A — .trim removes whitespace, .number coerces to number
- B — v-if removes from DOM, v-show just hides with display:none
Score yourself: 6/6 → excellent fundamentals 4–5 → good, but review reactivity & modifiers 0–3 → go back to basics (ref vs reactive, v-if vs v-show)
Level 2 – Intermediate (Questions 7–12)
Q7 What is the correct way to declare props with types in <script setup>?
A) props: { user: Object } B) const props = defineProps([‘user’]) C) defineProps<{ user: { name: string; age: number } }>() D) props.user = Object
Q8 What will happen when clicking the button?
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script setup> const emit = defineEmits(['update']) function updateName() { emit('update', 'Rahul') } </script> <template> <button @click="updateName">Update</button> </template> |
A) Error – no payload type B) Emits ‘update’ event with ‘Rahul’ C) Emits ‘update:name’ automatically D) Nothing – wrong event name
Q9 How do you expose a function to parent via template ref?
|
0 1 2 3 4 5 6 7 8 9 10 |
<script setup> function focus() { … } defineExpose({ focus }) // ← correct? </script> |
A) Yes B) No – use expose instead C) No – use methods object D) No – not possible in <script setup>
Q10 What is the correct way to watch multiple sources?
A) watch([countA, countB], …) B) watch(countA, countB, …) C) watch(countA && countB, …) D) watch(countA || countB, …)
Q11 Which hook runs only once after first DOM render?
A) onUpdated B) onBeforeUpdate C) onMounted D) onBeforeMount
Q12 What is wrong with this code?
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<script setup> const count = ref(0) watch(count, (newV) => { count.value = newV + 1 // ← this line }) </script> |
A) Nothing B) Infinite loop C) Syntax error D) count becomes read-only
Pause — write answers 7–12
Answers & explanations – Level 2
- C — defineProps<…>() with inline type is modern & type-safe standard
- B — emit(‘update’, ‘Rahul’) is correct (parent listens @update)
- A — defineExpose({ focus }) is correct
- A — array syntax for multiple sources
- C — onMounted runs once after first mount
- B — mutating the watched source inside callback → infinite loop Vue warns in dev mode
Score yourself: 6/6 → very solid intermediate level 4–5 → good, but review defineExpose & watch multiple sources 0–3 → revisit props/emits & watch
Level 3 – Mid-Advanced (Questions 13–18)
Q13 What hook should you use to restore scroll position when a cached tab becomes visible again?
A) onMounted B) onActivated C) onUpdated D) onBeforeMount
Q14 Which pattern correctly implements two-way binding on a custom component?
|
0 1 2 3 4 5 6 7 8 9 10 |
<!-- Parent --> <MyInput v-model="search" /> <!-- MyInput.vue --> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> |
A) Yes B) No — need defineEmits C) No — wrong event name D) No — need defineProps
Q15 What is the correct way to stop event propagation & prevent default?
|
0 1 2 3 4 5 6 |
<button @click.stop.prevent="save">Save</button> |
A) Yes B) Order matters — must be .prevent.stop C) Only .stop works D) Only .prevent works
Q16 What does v-memo=”[data, theme]” do?
A) Memoizes the element until data or theme changes B) Renders only once C) Prevents any re-render D) Memoizes props only
Q17 Which hook runs after DOM patch but before next paint?
A) onBeforeUpdate B) onUpdated C) onBeforeMount D) onMounted
Q18 What is wrong here?
|
0 1 2 3 4 5 6 7 8 9 10 |
<script setup> const emit = defineEmits(['update']) emit('update', 42) // ← this line </script> |
A) Nothing B) Emits must be inside function C) Wrong event name D) defineEmits needs type argument
Pause — write answers 13–18
Answers & explanations – Level 3
- B — onActivated runs when <KeepAlive> cached component is re-shown
- A — correct v-model implementation (modelValue + update:modelValue)
- A — order of modifiers usually doesn’t matter (Vue normalizes)
- A — skips re-render unless listed dependencies change
- B — onUpdated runs after patch
- B — emit must be called inside a function (event handler, method, etc.) Top-level emit is invalid
Score yourself: 6/6 → strong mid-advanced understanding 4–5 → good, review KeepAlive & v-memo 0–3 → revisit slots, expose, performance tools
Level 4 – Advanced (Questions 19–24)
Q19 Which hook should you use to destroy a Chart.js instance?
A) onUpdated B) onBeforeUnmount C) onUnmounted D) onBeforeUpdate
Q20 What happens if you return true from onErrorCaptured?
A) Error propagates to parent B) Error is handled — propagation stops C) App crashes D) Nothing – ignored
Q21 What does onServerPrefetch do?
A) Runs only on client B) Runs only on server during SSR C) Runs on both server & client hydration D) Runs after hydration
Q22 Which pattern correctly pauses a timer when tab is hidden?
|
0 1 2 3 4 5 6 7 |
onDeactivated(() => clearInterval(timer)) onActivated(() => timer = setInterval(…)) |
A) Yes B) No — cleanup should be in onBeforeUnmount C) No — timer should be cleared in onUnmounted D) No — use watch instead
Q23 What is the main difference between onBeforeUpdate and onUpdated?
A) before → after DOM patch B) before → before DOM patch C) No difference D) One is sync, one is async
Q24 Which hook runs multiple times during component lifetime?
A) onMounted B) onBeforeMount C) onUpdated D) onUnmounted
Pause — write answers 19–24
Answers & explanations – Level 4
- B — onBeforeUnmount (cleanup before DOM removal)
- B — return true = error handled, stop propagation
- C — runs on server during SSR + on client during hydration if needed
- A — correct pattern for pausing/resuming when cached tab is hidden/shown
- B — onBeforeUpdate = before patch, onUpdated = after patch
- C — onUpdated runs after every re-render
Score yourself: 6/6 → advanced level reached 4–5 → strong, but review SSR & error handling 0–3 → revisit lifecycle & SSR basics
Level 5 – Expert / Real-project traps (Questions 25–30)
Q25 What happens if you mutate a prop inside a child component?
A) Vue silently allows it B) Vue warns in dev mode + throws in production C) Nothing – prop is mutable D) Runtime error immediately
Q26 Which line causes infinite loop?
|
0 1 2 3 4 5 6 7 8 |
watch(count, (newV) => { count.value = newV + 1 // ← here }) |
A) Yes B) No – watch is one-way C) Only in Options API D) Only with deep: true
Q27 What is the correct way to expose multiple values?
|
0 1 2 3 4 5 6 7 8 9 10 |
defineExpose({ count, reset, isValid: computed(() => count.value > 0) }) |
A) Yes B) No – computed not allowed C) No – must use object literal only D) No – expose only functions
Q28 Why does this not trigger re-render?
|
0 1 2 3 4 5 6 7 |
const state = reactive({ user: { name: 'Rahul' } }) state.user = { name: 'Amit' } |
A) It does B) Reactive proxy lost when replacing whole object C) Missing .value D) Syntax error
Q29 Which hook should not be used for cleanup?
A) onBeforeUnmount B) onUnmounted C) onDeactivated D) onBeforeUpdate
Q30 What is the modern, type-safe way to declare emits with payload?
A) emits: [‘update’] B) defineEmits([‘update’]) C) defineEmits<{ (e: ‘update’, value: string): void }>() D) this.$emit(‘update’, value)
Pause — write answers 25–30
Answers & explanations – Level 5
- B — Vue warns loudly in dev + throws in production (since Vue 3 strict mode)
- A — mutating watched source inside callback → infinite loop
- A — yes, you can expose computed refs
- B — replacing whole reactive object breaks proxy → reactivity lost
- D — onBeforeUpdate is not for cleanup (runs on every update)
- C — modern type-safe way with defineEmits<…>()
Score yourself: 6/6 → expert level – you can teach others 4–5 → very strong – ready for senior roles 0–3 → revisit reactivity traps & lifecycle cleanup
Final Self-Assessment
Add up your scores (out of 30):
- 27–30 → Vue Master – you can confidently build medium/large apps
- 22–26 → Strong Intermediate – ready for most real projects
- 15–21 → Solid Fundamentals – keep practicing real components
- <15 → Back to basics – redo levels 1–3 + build 2–3 full components
Next steps recommended based on score
- 27+ → Build a full mini-app (todo + auth + tabs + modal + error boundary)
- 22–26 → Do exercises 3–7 from previous message
- 15–21 → Redo levels 1–3 + watch Vue Mastery / Laracasts free sections
- <15 → Start with official Vue tutorial → build counter → todo → form → tabs
Now tell me:
- Your score (optional)
- Which level was hardest?
- Which exercise do you want to build together live (1–7)?
- Or do you want a completely new custom exercise?
I’m here — let’s code together 🚀
