Method handlers vs inline handlers in Vue - Performance Comparison

Performance: Method handlers vs inline handlers

MEDIUM IMPACT

This affects how Vue processes event listeners and updates the DOM, impacting interaction responsiveness and rendering speed.

Handling user events in Vue components

Vue

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

<script setup>
function doSomething() {
  console.log('Clicked')
}
</script>

Method handlers are stable references, so Vue reuses the same listener without extra work, reducing DOM updates and improving responsiveness.

📈 Performance GainSingle event listener registration, reducing memory and CPU overhead during re-renders.

Handling user events in Vue components

Vue

<template>
  <button @click="() => doSomething()">Click me</button>
</template>

<script setup>
function doSomething() {
  console.log('Clicked')
}
</script>

Inline arrow functions are recreated on every render, causing Vue to treat the listener as new each time, leading to unnecessary DOM updates and slower interaction.

📉 Performance CostTriggers multiple event listener re-registrations and increases memory usage on each render.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Inline handler (e.g., @click="() => doSomething()")	Multiple add/remove event listeners per render	0 (no layout change)	Low paint cost but higher CPU for listener management	[X] Bad
Method handler (e.g., @click="doSomething")	Single event listener reused	0 (no layout change)	Low paint cost and minimal CPU overhead	[OK] Good

Rendering Pipeline

Vue compiles templates into render functions. Inline handlers create new function instances on each render, causing Vue to remove and add event listeners repeatedly. Method handlers keep stable references, minimizing DOM operations.

→Virtual DOM Diffing

→DOM Update

→Event Listener Management

⚠️ BottleneckEvent Listener Management stage due to repeated add/remove of listeners

Core Web Vital Affected

INP

This affects how Vue processes event listeners and updates the DOM, impacting interaction responsiveness and rendering speed.

Optimization Tips

1Avoid inline arrow functions in Vue templates for event handlers.

2Use method references to keep event listener references stable.

3Check event listener add/remove calls in DevTools Performance panel to spot inefficiencies.

Performance Quiz - 3 Questions

Why are inline event handlers slower in Vue compared to method handlers?

A Because method handlers use more memory

B Because inline handlers block the main thread for a long time

C Because inline handlers create new functions on each render causing repeated event listener updates

D Because method handlers cause layout thrashing

DevTools: Performance

How to check: Record an interaction in the Performance panel, then inspect the event listener registrations and removals during re-renders.

What to look for: Look for repeated addEventListener and removeEventListener calls indicating inline handlers; stable listeners indicate method handlers.