Generic components in Vue - Performance & Optimization

Performance: Generic components

MEDIUM IMPACT

Generic components affect rendering speed and bundle size by reusing code and reducing code duplication.

Reusing UI elements with similar structure but different data

Vue

<template>
  <div>
    <Card v-for="item in items" :key="item.id" :title="item.title" :content="item.content" />
  </div>
</template>
<script setup>
import Card from './Card.vue'
const items = [
  { id: 1, title: 'Title A', content: 'Content A' },
  { id: 2, title: 'Title B', content: 'Content B' },
  { id: 3, title: 'Title C', content: 'Content C' }
]
</script>

<!-- Card.vue -->
<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
  </div>
</template>
<script setup>
const props = defineProps(['title', 'content'])
</script>

Using a generic Card component reduces repeated HTML, lowers bundle size, and centralizes code for better caching and smaller bundle size.

📈 Performance GainSingle reflow for list rendering, smaller bundle size by reusing component code

Reusing UI elements with similar structure but different data

Vue

<template>
  <div>
    <div class="card">
      <h2>{{ title1 }}</h2>
      <p>{{ content1 }}</p>
    </div>
    <div class="card">
      <h2>{{ title2 }}</h2>
      <p>{{ content2 }}</p>
    </div>
    <div class="card">
      <h2>{{ title3 }}</h2>
      <p>{{ content3 }}</p>
    </div>
  </div>
</template>
<script setup>
const title1 = 'Title A'
const content1 = 'Content A'
const title2 = 'Title B'
const content2 = 'Content B'
const title3 = 'Title C'
const content3 = 'Content C'
</script>

Repeating similar HTML structure multiple times increases code duplication, causing slower rendering and larger bundle size.

📉 Performance CostTriggers multiple reflows for each repeated element, increases bundle size by duplicating code

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated HTML blocks	High (due to code duplication)	Multiple reflows per block	High paint cost due to many elements	[X] Bad
Generic component with props	Low (single component reused)	Single reflow for list	Lower paint cost due to fewer nodes	[OK] Good

Rendering Pipeline

Generic components reduce code duplication and CSS recalculations by reusing the same component structure with different data. This optimizes layout and paint steps.

→DOM Construction

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout stage due to repeated similar elements

Core Web Vital Affected

LCP

Generic components affect rendering speed and bundle size by reusing code and reducing code duplication.

Optimization Tips

1Reuse UI elements with generic components to reduce bundle size.

2Pass data via props to avoid duplicating component code.

3Code reuse reduces bundle size, improving LCP.

Performance Quiz - 3 Questions

How does using generic components affect the bundle size compared to repeating HTML blocks?

A It reduces bundle size by reusing the same component structure

B It increases bundle size because components add overhead

C It has no effect on bundle size

D It duplicates code for each use

DevTools: Performance

How to check: Record a performance profile while loading the page and interacting with the list. Look for layout and paint events related to repeated elements.

What to look for: High number of layout recalculations and paint events indicates repeated DOM nodes. Lower counts indicate efficient generic component usage.

Practice

1. What is the main benefit of using generic components in Vue?

easy

A. They allow reusing one component for different data types.

B. They automatically style components without CSS.

C. They replace the need for Vue Router.

D. They make components load faster by default.

Solution

1. Step 1: Understand generic components purpose

   Generic components are designed to be reusable with different data types, so you don't rewrite similar components for each type.

2. Step 2: Compare options to this purpose

   Options B, C, and D describe unrelated features. Only They allow reusing one component for different data types. matches the core benefit of generic components.

3. Final Answer:

   They allow reusing one component for different data types. -> Option A

4. Quick Check:

   Generic components = reuse for many data types [OK]

Hint: Generic means reusable for many types, not styling or routing [OK]

Common Mistakes:

• Confusing generic components with styling features
• Thinking generic components handle routing
• Assuming generic components improve load speed automatically

2. Which syntax correctly defines props with a generic type in a Vue 3 component using TypeScript?

easy

A. const props = defineProps(['item']);

B. const props = defineProps<{ item: T }>();

C. const props = defineProps<T>();

D. const props = defineProps({ item: String });

Solution

1. Step 1: Recall TypeScript generic prop syntax in Vue

   Using defineProps with a generic type requires specifying the prop shape with a type parameter, like { item: T }.

2. Step 2: Analyze each option

   const props = defineProps<{ item: T }>(); correctly uses defineProps<{ item: T }>(). const props = defineProps<T>(); misses the prop shape object. const props = defineProps(['item']); uses string array syntax, not generic. const props = defineProps({ item: String }); uses a fixed type, not generic.

3. Final Answer:

   const props = defineProps<{ item: T }>(); -> Option B

4. Quick Check:

   Generic props need object shape with type parameter [OK]

Hint: Generic props need object shape with type parameter in defineProps [OK]

Common Mistakes:

• Using array syntax instead of type object for generic props
• Omitting the prop shape object in defineProps
• Using fixed types instead of generics

3. Given this generic Vue component snippet, what will be the rendered output if item is a string "Hello"?

const props = defineProps<{ item: T }>();
const item = props.item;
return <div>{typeof item}: {item}</div>;

medium

A. Runtime error due to missing type

B. <div>object: Hello</div>

C. <div>number: Hello</div>

D. <div>string: Hello</div>

Solution

1. Step 1: Understand the typeof operator on the prop

   The typeof operator returns the type of the value at runtime. Since item is "Hello", a string, typeof item is "string".

2. Step 2: Determine the rendered output

   The returned JSX renders a div with text: "string: Hello".

3. Final Answer:

   <div>string: Hello</div> -> Option D

4. Quick Check:

   typeof 'Hello' = string, so output matches [OK]

Hint: typeof a string value returns 'string' in output [OK]

Common Mistakes:

• Confusing typeof result with the value itself
• Expecting object or number type for string value
• Assuming runtime error without type issues

4. Identify the error in this generic Vue component code:

const props = defineProps<{ item: T }>();
const item = props.item;
console.log(item.value);

medium

A. Accessing value assumes item is a ref, but it may not be.

B. Missing import of defineProps causes syntax error.

C. Generic type T must be declared before use.

D. Props must be defined as an array, not an object.

Solution

1. Step 1: Analyze usage of item.value

   Accessing value is valid only if item is a Vue ref. The generic type T could be any type, so item might not have value.

2. Step 2: Check other options

   Missing import of defineProps causes syntax error. is incorrect because defineProps is globally available in Vue SFCs. Generic type T must be declared before use. is incorrect because T is assumed declared in the generic context. Props must be defined as an array, not an object. is wrong because props can be defined as an object type.

3. Final Answer:

   Accessing value assumes item is a ref, but it may not be. -> Option A

4. Quick Check:

   Accessing .value requires ref type, generic may not be ref [OK]

Hint: Only refs have .value; generics may be plain values [OK]

Common Mistakes:

• Assuming generic type is always a ref
• Thinking defineProps needs import in SFC
• Believing props must be array, not object

5. You want to create a generic Vue component that accepts a list of items of any type and renders each item with a slot. Which approach correctly applies generics and slots together?

hard

A. Use defineProps(['items']) and render items directly without slots.

B. Use defineProps<{ items: any[] }>() and hardcode item rendering inside component.

C. Use defineProps<{ items: T[] }>() and a default slot with v-for passing each item as slot prop.

D. Use defineProps<{ items: T }>() and render items without looping.

Solution

1. Step 1: Define generic props for list of items

   Using defineProps<{ items: T[] }>() correctly types the prop as an array of generic type T.

2. Step 2: Use slots with v-for to render each item

   Passing each item as a slot prop allows flexible rendering by the parent component, which is the correct pattern for generic components with slots.

3. Step 3: Evaluate other options

   Use defineProps(['items']) and render items directly without slots. lacks generics and slots. Use defineProps<{ items: any[] }>() and hardcode item rendering inside component. uses any losing type safety and hardcodes rendering. Use defineProps<{ items: T }>() and render items without looping. uses T instead of T[] and misses looping.

4. Final Answer:

   Use defineProps<{ items: T[] }>() and a default slot with v-for passing each item as slot prop. -> Option C

5. Quick Check:

   Generic list + slot with v-for = Use defineProps<{ items: T[] }>() and a default slot with v-for passing each item as slot prop. [OK]

Hint: Generic list props need array type and slot with v-for [OK]

Common Mistakes:

• Using single item type instead of array for list props
• Not using slots for flexible item rendering
• Hardcoding rendering inside generic component