Emitting custom events in Vue - Performance & Optimization

Performance: Emitting custom events

MEDIUM IMPACT

This affects interaction responsiveness and event handling efficiency in Vue components.

Communicating from child to parent component using custom events

Vue

<template>
  <button @click="$emit('update', data.value)">Click</button>
</template>
<script setup>
const data = { value: 1 };
</script>

Emit only necessary simple data to reduce event payload size and speed up event handling.

📈 Performance GainReduces event processing time and memory use, improving interaction responsiveness.

Communicating from child to parent component using custom events

Vue

<template>
  <button @click="$emit('update', data)">Click</button>
</template>
<script setup>
const data = { value: 1 };
</script>

Emitting events with large or complex objects causes extra memory usage and slower event propagation.

📉 Performance CostTriggers multiple event listeners and increases memory usage, slowing interaction responsiveness.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Emit large objects as event payload	Multiple reactive updates	Multiple reflows if DOM changes	High paint cost due to layout thrashing	[X] Bad
Emit simple values as event payload	Minimal reactive updates	Single reflow if needed	Low paint cost	[OK] Good

Rendering Pipeline

When a custom event is emitted, Vue triggers event listeners which may cause reactive updates, leading to style recalculation, layout, and paint if DOM changes occur.

→Event Handling

→Reactive Update

→Style Calculation

→Layout

→Paint

⚠️ BottleneckReactive Update and Layout stages can be expensive if event handlers cause heavy DOM changes.

Core Web Vital Affected

INP

This affects interaction responsiveness and event handling efficiency in Vue components.

Optimization Tips

1Emit only the data needed in custom events to reduce payload size.

2Avoid triggering heavy reactive updates in event handlers.

3Use Vue devtools Performance panel to monitor event handling costs.

Performance Quiz - 3 Questions

What is a performance benefit of emitting simple data instead of large objects in Vue custom events?

A Reduces event processing time and memory usage

B Increases the number of event listeners

C Triggers more reflows and paints

D Blocks the main thread for longer

DevTools: Performance

How to check: Record interaction while clicking the component emitting events, then analyze the flame chart for event handling and layout times.

What to look for: Look for long event handler durations and multiple layout recalculations indicating inefficient event emission.