Why component patterns matter in Vue - Performance Evidence

Performance: Why component patterns matter

HIGH IMPACT

This affects how fast the page loads and how smoothly the app responds to user actions by controlling rendering and updates.

Building a Vue app with reusable components

Vue

<script setup>
const items = ref(Array(1000).fill(0))
</script>
<template>
  <div>
    <ItemComponent v-for="(item, index) in items" :key="index" :item="item" />
  </div>
</template>

<script>
export default {
  props: ['item'],
  setup() {
    // use shallow reactive or memoized computed to avoid unnecessary updates
  }
}
</script>

Memoizing and limiting reactive dependencies reduces re-renders to only changed items.

📈 Performance GainReduces re-renders from 1000 to only changed items, improving interaction responsiveness.

Building a Vue app with reusable components

Vue

<script setup>
const items = ref(Array(1000).fill(0))
</script>
<template>
  <div>
    <ItemComponent v-for="(item, index) in items" :key="index" :item="item" />
  </div>
</template>

<script>
export default {
  props: ['item'],
  setup() {
    // heavy computed or watchers inside each item
  }
}
</script>

Each item component does heavy work and re-renders unnecessarily, causing slow updates and lag.

📉 Performance CostTriggers 1000 re-renders on small data changes, blocking interaction for hundreds of milliseconds.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy reactive dependencies in many child components	High (many nodes updated)	High (many reflows)	High (many paints)	[X] Bad
Memoized props and shallow reactive data	Low (only changed nodes)	Low (few reflows)	Low (minimal paints)	[OK] Good

Rendering Pipeline

Component patterns affect how Vue tracks reactive data and triggers updates, influencing style calculation, layout, and paint.

→Reactive Dependency Tracking

→Virtual DOM Diffing

→Layout

→Paint

⚠️ BottleneckExcessive reactive updates cause repeated Virtual DOM diffing and layout recalculations.

Core Web Vital Affected

INP

This affects how fast the page loads and how smoothly the app responds to user actions by controlling rendering and updates.

Optimization Tips

1Avoid heavy reactive dependencies inside many child components.

2Use memoization and shallow reactive data to limit updates.

3Always provide stable keys for list rendering to optimize diffing.

Performance Quiz - 3 Questions

What is a main performance risk of poorly designed Vue component patterns?

A Using too many CSS classes

B Excessive component re-renders causing slow interaction

C Too few components causing large DOM trees

D Not using Vue Router

DevTools: Performance

How to check: Record a performance profile while interacting with the component, then analyze the flame chart for excessive component updates and layout recalculations.

What to look for: Look for many repeated component renders and layout thrashing indicating inefficient component patterns.