Passing arguments to handlers in Vue - Performance & Optimization

Performance: Passing arguments to handlers

MEDIUM IMPACT

This affects interaction responsiveness and rendering speed when event handlers receive arguments in Vue components.

Passing arguments to event handlers in Vue templates

Vue

<button @click="handleClick" :data-id="item.id">Click</button>

// In script
function handleClick(event) {
  const id = event.currentTarget.dataset.id;
  // handle click with id
}

Reuses the same handler function, passing data via attributes to avoid recreating functions on each render.

📈 Performance GainReduces function creations to one, improving input responsiveness and lowering CPU overhead.

Passing arguments to event handlers in Vue templates

Vue

<button @click="() => handleClick(item.id)">Click</button>

Creates a new function on every render causing more work for Vue's virtual DOM and event listeners.

📉 Performance CostTriggers multiple function creations per render, increasing CPU usage and slowing interaction responsiveness.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Inline arrow function in template	No extra DOM nodes	0	Low	[X] Bad
Stable handler with data attributes	No extra DOM nodes	0	Low	[OK] Good

Rendering Pipeline

Passing arguments inline creates new functions each render, increasing work in the Virtual DOM diffing and event binding stages.

→Virtual DOM Diffing

→Event Binding

→JavaScript Execution

⚠️ BottleneckJavaScript Execution due to repeated function creation

Core Web Vital Affected

INP

This affects interaction responsiveness and rendering speed when event handlers receive arguments in Vue components.

Optimization Tips

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

2Pass data via event objects or data attributes instead of inline arguments.

3Use stable handler functions to reduce JavaScript execution overhead.

Performance Quiz - 3 Questions

Why is using an inline arrow function in a Vue template for event handlers less performant?

A Because it creates a new function on every render increasing CPU work

B Because it adds extra DOM nodes

C Because it blocks the main thread during painting

D Because it increases CSS selector complexity

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for frequent JavaScript function creations and garbage collection.

What to look for: High counts of short-lived functions and increased scripting time indicate inefficient argument passing.