Dynamic render patterns in Vue - Performance & Optimization

Performance: Dynamic render patterns

MEDIUM IMPACT

This affects how quickly the page updates and how smoothly user interactions feel when Vue dynamically renders or updates components.

Rendering a list with dynamic components that update frequently

Vue

<template>
  <div>
    <component
      v-for="item in items"
      :is="item.type"
      :key="item.id"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const items = ref([...])
// stable keys ensure Vue efficiently patches only changed items
</script>

Using stable :key enables Vue to diff the list efficiently and skip re-renders for unchanged items, reducing reflows.

📈 Performance Gainreduces reflows from N to only changed items, improving INP

Rendering a list with dynamic components that update frequently

Vue

<template>
  <div>
    <component v-for="item in items" :is="item.type" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const items = ref([...])
// items update frequently causing all components to re-render
</script>

Rendering dynamic components without stable keys on every update causes many reflows and repaints, slowing interaction.

📉 Performance Costtriggers N reflows per update where N is the number of items

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Dynamic components without stable key	Many nodes updated	N reflows per update	High paint cost	[X] Bad
Dynamic components with stable key	Only changed nodes updated	Minimal reflows	Lower paint cost	[OK] Good

Rendering Pipeline

Dynamic render patterns cause Vue to patch the DOM frequently. This triggers style recalculation, layout, and paint stages in the browser.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout is most expensive because dynamic updates often change element sizes or positions.

Core Web Vital Affected

INP

This affects how quickly the page updates and how smoothly user interactions feel when Vue dynamically renders or updates components.

Optimization Tips

1Avoid re-rendering all dynamic components on every data change.

2Use stable keys to minimize DOM updates.

3Profile layout events in DevTools to detect dynamic rendering bottlenecks.

Performance Quiz - 3 Questions

What is the main performance cost of rendering many dynamic components without stable keys in Vue?

A Increased JavaScript bundle size

B Frequent layout recalculations causing slow interaction

C Longer initial page load time

D Higher network latency

DevTools: Performance

How to check: Record a performance profile while interacting with the dynamic list. Look for frequent Layout and Recalculate Style events.

What to look for: High number of layout events indicates inefficient dynamic rendering; fewer layout events means better performance.