Why advanced patterns matter in Vue - Performance Evidence

Performance: Why advanced patterns matter

HIGH IMPACT

This concept affects how efficiently Vue apps render and update, impacting page load speed and interaction responsiveness.

Updating a list with many items efficiently

Vue

<template>
  <ul>
    <ListItem v-for="item in items" :key="item.id" :item="item" />
  </ul>
</template>

<script setup>
import { ref, reactive } from 'vue'
import ListItem from './ListItem.vue'
const items = ref([...Array(1000)].map((_, i) => reactive({ id: i, name: `Item ${i}` })))

function updateAll() {
  items.value.forEach(item => { item.name += ' updated' })
}
</script>

Using a child component with props and mutating items in place avoids recreating the whole list, reducing re-renders.

📈 Performance GainOnly updated items re-render, reducing DOM updates and improving interaction responsiveness.

Updating a list with many items efficiently

Vue

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

<script setup>
import { ref } from 'vue'
const items = ref([...Array(1000)].map((_, i) => ({ id: i, name: `Item ${i}` })))

function updateAll() {
  items.value = items.value.map(item => ({ ...item, name: item.name + ' updated' }))
}
</script>

Recreating all items triggers Vue to re-render every list item, causing many DOM updates and slow interaction.

📉 Performance CostTriggers 1000 re-renders and many DOM updates, causing slow interaction and high CPU usage.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Recreate entire list on update	Many DOM nodes replaced	1000 reflows	High paint cost	[X] Bad
Update items in place with child components	Minimal DOM changes	Few reflows	Low paint cost	[OK] Good

Rendering Pipeline

Vue tracks reactive data changes and schedules component updates. Advanced patterns minimize unnecessary updates, reducing layout recalculations and paints.

→Reactive Dependency Tracking

→Virtual DOM Diffing

→DOM Updates

→Paint

⚠️ BottleneckDOM Updates stage is most expensive due to layout recalculations and repaints.

Core Web Vital Affected

INP

This concept affects how efficiently Vue apps render and update, impacting page load speed and interaction responsiveness.

Optimization Tips

1Avoid recreating large reactive arrays; update items in place when possible.

2Use child components to isolate updates and reduce re-render scope.

3Always provide stable keys in v-for loops to help Vue track elements efficiently.

Performance Quiz - 3 Questions

Why do advanced Vue patterns improve interaction performance?

A They increase the number of reactive variables.

B They reduce unnecessary component re-renders and DOM updates.

C They add more watchers to track changes.

D They force Vue to recreate the entire DOM tree.

DevTools: Performance

How to check: Record a performance profile while triggering updates; look for long scripting and rendering tasks.

What to look for: Look for many small DOM updates and long frames indicating slow re-renders; fewer updates mean better performance.