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.

Practice

1. What is the main purpose of named slots in Vue components?

easy

A. To handle component lifecycle hooks

B. To share data from parent to child components

C. To create reactive state inside a component

D. To place different content in specific parts of a component

Solution

1. Step 1: Understand named slots concept

   Named slots allow you to define multiple placeholders inside a component where different content can be inserted.

2. Step 2: Identify the purpose of named slots

   They help organize content by placing it in specific parts of the component template.

3. Final Answer:

   To place different content in specific parts of a component -> Option D

4. Quick Check:

   Named slots = specific content placement [OK]

Hint: Named slots = different content in specific places [OK]

Common Mistakes:

• Confusing named slots with props
• Thinking named slots share data
• Mixing named slots with lifecycle hooks

2. Which of the following is the correct syntax to define a named slot called header inside a Vue component?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall named slot syntax in Vue

   Named slots are defined using the element with a name attribute.

2. Step 2: Match correct syntax

   The correct syntax is . Other options are invalid or deprecated.

3. Final Answer:

   <slot name="header"></slot> -> Option C

4. Quick Check:

   Named slot syntax = <slot name="..."> [OK]

Hint: Named slots use syntax [OK]

Common Mistakes:

• Using which is deprecated
• Trying to create custom tags like
• Confusing named slots with props

3. Given this parent usage of a scoped slot:

<MyList>
  <template #item="{ item }">
    <li>{{ item.text }}</li>
  </template>
</MyList>

And this child component template:

<ul>
  <slot name="item" :item="listItem"></slot>
</ul>

What will be rendered if listItem is { text: 'Hello' }?

medium

A. Hello

B.

C. {{ item.text }}

D.

Solution

1. Step 1: Understand scoped slot data passing

   The child passes listItem as item to the slot content using :item="listItem".

2. Step 2: Parent uses slot scope to access item.text

   The parent template receives item and renders <li>{{ item.text }}</li>, which becomes <li>Hello</li>.

3. Final Answer:

   <ul><li>Hello</li></ul> -> Option A

4. Quick Check:

   Scoped slot passes data = rendered content [OK]

Hint: Scoped slots pass data object to slot content [OK]

Common Mistakes:

• Ignoring the slot scope and expecting raw slot tags
• Not using the slot props correctly in parent
• Confusing named slots with scoped slots

4. Identify the error in this Vue component usage:

<MyComponent>
  <template slot="footer">Footer Content</template>
</MyComponent>

Assuming MyComponent defines a named slot footer using <slot name="footer">.

medium

A. Missing v-slot directive on template

B. Using deprecated slot attribute instead of #footer shorthand

C. Named slot must be inside MyComponent template, not usage

D. No error, this is correct syntax

Solution

1. Step 1: Check slot syntax in Vue 3

   The slot attribute on template is deprecated in Vue 3.

2. Step 2: Identify correct syntax for named slots

   Use v-slot:footer or shorthand #footer instead of slot="footer".

3. Final Answer:

   Using deprecated slot attribute instead of #footer shorthand -> Option B

4. Quick Check:

   Use v-slot or # for named slots [OK]

Hint: Use v-slot or #, not slot attribute [OK]

Common Mistakes:

• Using old slot attribute syntax
• Confusing slot definition with slot usage
• Thinking no syntax change in Vue 3

5. You want to create a reusable Card component with named slots for header, body, and footer. The body slot should receive a scoped prop info from the component. Which is the correct way to define the Card template?

hard

A.

B.

C.

D.

Solution

1. Step 1: Identify named slots and scoped props

   The body slot must receive the scoped prop info from the component's data.

2. Step 2: Check slot definitions

   Only the body slot has :info='cardInfo' to pass the scoped prop. The others are simple named slots without props.

3. Final Answer:

   Correct template with named slots and scoped prop on body slot -> Option A

4. Quick Check:

   Scoped prop on body slot only [OK]

Hint: Pass scoped props only on slots needing data [OK]

Common Mistakes:

• Passing scoped props on wrong slots
• Missing scoped prop on body slot
• Using default slot instead of named slots