Why event handling matters in Vue - Performance Evidence

Performance: Why event handling matters

HIGH IMPACT

Event handling affects how quickly the page responds to user actions and how much work the browser must do during interactions.

Handling user clicks on many list items

Vue

<template>
  <ul @click="handleListClick">
    <li v-for="item in items" :key="item.id" :data-id="item.id">{{ item.name }}</li>
  </ul>
</template>

<script setup>
const items = Array(1000).fill(0).map((_, i) => ({ id: i, name: `Item ${i}` }));
function handleListClick(event) {
  const li = event.target.closest('li');
  if (!li) return;
  const id = Number(li.dataset.id);
  const item = items.find(i => i.id === id);
  if (item) console.log(item.name);
}
</script>

Using event delegation attaches only one listener to the parent, reducing memory and speeding event handling.

📈 Performance GainSingle event listener instead of 1000, reducing memory and CPU load.

Handling user clicks on many list items

Vue

<template>
  <ul>
    <li v-for="item in items" :key="item.id" @click="handleClick(item)">{{ item.name }}</li>
  </ul>
</template>

<script setup>
const items = Array(1000).fill(0).map((_, i) => ({ id: i, name: `Item ${i}` }));
function handleClick(item) {
  console.log(item.name);
}
</script>

Attaching a separate click listener to each item creates 1000 event listeners, increasing memory use and slowing event processing.

📉 Performance CostAdds 1000 event listeners, increasing memory and CPU usage during interactions.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Individual listeners on many elements	Many listeners attached	0	0	[X] Bad
Single delegated listener on parent	One listener attached	0	0	[OK] Good

Rendering Pipeline

Event handling affects the browser's event processing stage, which happens after painting. Poor event handling can cause delays in processing user input and block the main thread.

→Event Processing

→Main Thread

→Composite

⚠️ BottleneckMain Thread blocking due to many event listeners or heavy event handlers

Core Web Vital Affected

INP

Event handling affects how quickly the page responds to user actions and how much work the browser must do during interactions.

Optimization Tips

1Avoid attaching event listeners to many individual elements; use event delegation.

2Keep event handlers short and fast to avoid blocking the main thread.

3Use event delegation to reduce memory usage and improve input responsiveness.

Performance Quiz - 3 Questions

What is a main performance problem when attaching event listeners to many individual elements?

A It increases memory usage and slows event processing

B It causes more CSS reflows

C It blocks network requests

D It improves page load speed

DevTools: Performance

How to check: Record a performance profile while interacting with the list. Look for long tasks or many event handler calls in the Main thread.

What to look for: Check if many event listeners are attached and if event handling causes main thread blocking.