v-on directive for events in Vue - Performance & Optimization

Performance: v-on directive for events

MEDIUM IMPACT

This affects how quickly the page responds to user interactions and how efficiently event listeners are managed in the browser.

Attaching event listeners to many similar elements

Vue

<template>
  <ul v-on: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 id = event.target.dataset.id;
  if (id) console.log('Clicked', id);
}
</script>

Uses event delegation by attaching one listener to the parent, reducing listeners drastically.

📈 Performance GainSingle event listener instead of 1000, greatly improving INP and memory.

Attaching event listeners to many similar elements

Vue

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

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

Attaches 1000 separate event listeners, increasing memory use and slowing interaction handling.

📉 Performance CostTriggers 1000 event listeners, increasing INP and memory usage.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Individual v-on on many elements	Many listeners attached	0 (no layout changes)	Low paint cost	[X] Bad
Single v-on on parent with delegation	One listener attached	0 (no layout changes)	Low paint cost	[OK] Good

Rendering Pipeline

When v-on adds event listeners, the browser registers them in the event system. On user interaction, the browser must check all relevant listeners and execute handlers. Too many listeners increase event processing time and memory use.

→Event Handling

→JavaScript Execution

⚠️ BottleneckEvent Handling stage due to many listeners slowing interaction response.

Core Web Vital Affected

INP

This affects how quickly the page responds to user interactions and how efficiently event listeners are managed in the browser.

Optimization Tips

1Avoid attaching v-on listeners to many repeated elements individually.

2Use event delegation by attaching a single listener to a common parent element.

3Check event listener counts in DevTools to keep interaction fast and memory low.

Performance Quiz - 3 Questions

What is the main performance problem with adding v-on listeners to many repeated elements?

A It causes layout shifts on every click.

B It creates many event listeners, increasing memory and slowing interaction.

C It blocks the initial page load.

D It increases CSS selector complexity.

DevTools: Performance

How to check: Open DevTools, go to Performance tab, record while interacting with elements, then inspect event listener counts and interaction delays.

What to look for: Look for high number of event listeners and long interaction handling times indicating slow INP.