Named slots and scoped slots in Vue - Performance & Optimization

Performance: Named slots and scoped slots

MEDIUM IMPACT

This concept affects rendering performance by controlling how much DOM is created and how often components re-render due to slot content changes.

Passing dynamic content to child components using slots

Vue

<ChildComponent>
  <template #default="{ data }">
    <div>{{ data }}</div>
  </template>
</ChildComponent>

Passing precomputed data via scoped slots avoids recomputing inside the slot template, reducing re-renders.

📈 Performance Gainreduces re-renders and DOM updates by computing once in parent

Passing dynamic content to child components using slots

Vue

<ChildComponent>
  <template #default>
    <div>{{ expensiveComputation() }}</div>
  </template>
</ChildComponent>

The default slot content runs expensive computations on every parent re-render, causing repeated DOM updates.

📉 Performance Costtriggers multiple re-renders and DOM updates on each parent state change

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Inline dynamic slot content	High (many nodes updated)	Multiple reflows per update	High paint cost due to frequent changes	[X] Bad
Scoped slots with precomputed props	Low (minimal updates)	Single reflow per update	Low paint cost due to fewer changes	[OK] Good
Named slots with inline static content	Medium (recreated each render)	Some reflows due to patching	Medium paint cost	[!] OK
Named slots with static child components	Low (cached nodes)	Minimal reflows	Low paint cost	[OK] Good

Rendering Pipeline

Named and scoped slots content is compiled into render functions that Vue uses to patch the DOM. When slot props or content change, Vue re-runs these functions to update the DOM nodes inside the slots.

→Virtual DOM Diffing

→Patch

→Re-render

⚠️ BottleneckRe-rendering slot content triggers virtual DOM diffing and patching which can be expensive if slot content is complex or changes often.

Core Web Vital Affected

INP

This concept affects rendering performance by controlling how much DOM is created and how often components re-render due to slot content changes.

Optimization Tips

1Avoid inline computations inside slot templates to reduce re-renders.

2Use static child components for static slot content to enable Vue optimizations.

3Memoize slot props passed to scoped slots to minimize virtual DOM updates.

Performance Quiz - 3 Questions

What is a main performance benefit of using scoped slots with precomputed data?

A Increases DOM nodes for better layout

B Reduces unnecessary re-renders by avoiding inline computations inside slots

C Triggers more reflows to update styles

D Blocks rendering until all slots are loaded

DevTools: Performance

How to check: Record a performance profile while interacting with the component using slots. Look for frequent re-renders or long scripting times related to slot rendering.

What to look for: High scripting time or many DOM updates during slot content changes indicate inefficient slot usage.