Method handlers vs inline handlers in Vue - Practice Questions

Challenge - 5 Problems

❓ component_behavior

intermediate

Difference in event handling output

Consider a Vue 3 component with a button. Which option correctly shows the output when clicking the button using a method handler vs an inline handler?

Vue

<template>
  <button @click="handleClick">Click me</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
function handleClick() {
  count.value++
  console.log('Method count:', count.value)
}
</script>

A Clicking the button logs 'Method count: NaN' after first click.

B Clicking the button logs 'Method count: 1', then 'Method count: 2', etc.

C Clicking the button logs 'Method count: 0' every time.

D Clicking the button logs 'Method count: undefined' every time.

💡 Hint

Think about how the method updates the reactive count variable.

The method handler increments the reactive count variable and logs the updated value. So each click increases the count and logs the new number.

📝 Syntax

intermediate

Correct inline event handler syntax in Vue 3

Which option shows the correct inline event handler syntax to increment a reactive count variable on button click?

Vue

<template>
  <button @click="???">Click me</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

A @click="count.value++"

B @click="count++"

C @click="() => count.value++"

D @click="incrementCount()"

💡 Hint

Remember that count is a ref and you must access its value.

Since count is a ref, you must use count.value++ to update it inline. Using count++ will not update the reactive value.

🔧 Debug

advanced

Why does this inline handler not update the UI?

Given this Vue 3 code, why does clicking the button not update the displayed count?

Vue

<template>
  <button @click="count++">Click me</button>
  <p>Count: {{ count }}</p>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

A Because the button click event is not bound correctly.

B Because the template cannot display ref variables directly.

C Because <code>count++</code> does not update the ref's value property.

D Because <code>count</code> is not initialized.

💡 Hint

Think about how refs work in Vue 3 and how to update them.

count is a ref object. Using count++ tries to increment the object itself, which does nothing. You must increment count.value to update the reactive value and the UI.

🧠 Conceptual

advanced

Performance difference between method handlers and inline handlers

Which statement best explains the performance difference between method handlers and inline handlers in Vue 3?

A Method handlers cause memory leaks while inline handlers do not.

B Inline handlers are more performant because they are simpler and shorter.

C Both have the same performance because Vue optimizes event handlers automatically.

D Method handlers are more performant because they avoid creating a new function on each render.

💡 Hint

Consider how Vue treats inline functions during rendering.

Inline handlers create a new function every render, which can cause unnecessary re-renders or memory use. Method handlers reuse the same function reference, improving performance.

❓ state_output

expert

State value after mixed method and inline handlers

Given this Vue 3 component, what is the value of count after clicking the 'Click me' button twice?

Vue

<template>
  <button @click="increment">Click me</button>
  <button @click="count.value++">Inline Increment</button>
  <p>Count: {{ count }}</p>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value += 2
}
</script>

A 4

B 3

C 2

D 1

💡 Hint

The increment method adds 2 per click.

Clicking the first button calls increment() which adds 2. Clicking the second button adds 1. Two clicks total means 2 + 2 = 4 if clicking the first button twice, or mixed clicks add accordingly.