Method handlers vs inline handlers in Vue - Visual Side-by-Side Comparison

Concept Flow - Method handlers vs inline handlers

User Event Triggered

↓

Direct Expression Evaluated

↓

Method Function Called

↓

State Updated or Action Taken

When a user event happens, Vue can run inline code directly or call a method defined in the component. Inline handlers run expressions immediately, while method handlers call reusable functions.

Execution Sample

Vue

<template>
  <button @click="count++">Inline Increment</button>
  <button @click="increment()">Method Increment</button>
  <p>Count: {{ count }}</p>
</template>

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

Two buttons update the count: one uses inline code, the other calls a method.

Execution Table

Step	Event	Handler Type	Action	Count Before	Count After	Rendered Output
1	Click Inline Increment	Inline	Evaluate count++	0	1	Count: 1
2	Click Method Increment	Method	Call increment(), count++	1	2	Count: 2
3	Click Inline Increment	Inline	Evaluate count++	2	3	Count: 3
4	Click Method Increment	Method	Call increment(), count++	3	4	Count: 4
5	No more clicks	-	-	4	4	Count: 4

💡 No more user events, count remains at 4

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	Final
count.value	0	1	2	3	4	4

Key Moments - 3 Insights

Why does the inline handler update count immediately without calling a function?

Because inline handlers run the expression directly in the template event, as shown in execution_table step 1 where count++ increments count without a method call.

How does the method handler differ in execution from the inline handler?

The method handler calls a function defined in the script, shown in execution_table step 2 where increment() is called, which then updates count.value.

Does using a method handler affect the rendered output differently than inline?

No, both update the reactive count and cause the template to re-render, as seen in the rendered output column where both handlers update the displayed count.

Visual Quiz - 3 Questions

Look at the execution table, what is count.value after the second click event?

A 3

B 1

C 2

D 4

💡 Hint

Check the 'Count After' column at step 2 in the execution_table.

At which step does the method handler run?

A Step 2

B Step 3

C Step 1

D Step 5

💡 Hint

Look at the 'Handler Type' column in the execution_table.

If the inline handler was changed to count += 2, what would count.value be after the first click?

A 1

B 2

C 3

D 4

💡 Hint

Consider how count++ increments by 1; count += 2 would add 2 instead.

Concept Snapshot

Vue event handlers can be inline or method calls.
Inline handlers run expressions directly in the template.
Method handlers call functions defined in the script.
Both update reactive state and cause re-render.
Use methods for reusable or complex logic.
Inline is quick for simple updates.

Full Transcript

This visual shows how Vue handles user events with inline and method handlers. When a button is clicked, an inline handler runs the expression directly, incrementing the count immediately. A method handler calls a function defined in the script, which then updates the count. Both ways update the reactive variable and cause the displayed count to update. The execution table tracks each click event, the handler type, the count before and after, and the rendered output. The variable tracker shows count.value increasing step by step. Key moments clarify why inline handlers run expressions directly and how method handlers call functions. The quiz tests understanding of count values and handler types at each step. This helps beginners see the difference and when to use each handler style.