Defining components in Vue - Performance & Optimization

Performance: Defining components

MEDIUM IMPACT

This affects initial page load speed and rendering performance by controlling how Vue processes and renders UI parts.

Creating reusable UI parts in Vue

Vue

<script setup>
import MyButton from './MyButton.vue'
</script>

<template>
  <MyButton />
  <MyButton />
  <MyButton />
</template>

Importing components from separate files allows Vue to cache and reuse component definitions, reducing setup cost.

📈 Performance GainSingle component definition reused, reducing JS execution and improving LCP.

Creating reusable UI parts in Vue

Vue

<script setup>
const MyButton = {
  template: `<button>Click me</button>`
}
</script>

<template>
  <MyButton />
  <MyButton />
  <MyButton />
</template>

Defining components inline without proper separation can cause Vue to recreate component definitions on each render, increasing overhead.

📉 Performance CostTriggers multiple component initializations and increases JS execution time on load.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Inline component definitions recreated each render	High (many nodes recreated)	Multiple reflows per render	High paint cost due to frequent DOM updates	[X] Bad
Imported single component reused multiple times	Low (nodes reused)	Single reflow per update	Lower paint cost due to efficient updates	[OK] Good

Rendering Pipeline

Vue compiles component templates into render functions, which create virtual DOM nodes. These nodes are then patched to the real DOM. Defining components efficiently reduces the work in creating and patching nodes.

→JS Execution

→Virtual DOM Creation

→DOM Patching

⚠️ BottleneckJS Execution and Virtual DOM Creation when many components are defined inefficiently

Core Web Vital Affected

LCP

This affects initial page load speed and rendering performance by controlling how Vue processes and renders UI parts.

Optimization Tips

1Define Vue components once and import them to reuse.

2Avoid inline component definitions inside setup scripts to reduce JS overhead.

3Reuse component instances to minimize DOM node creation and reflows.

Performance Quiz - 3 Questions

What is a performance downside of defining Vue components inline inside the setup script repeatedly?

A It reduces the number of DOM nodes created, improving performance.

B It causes Vue to recreate component definitions on each render, increasing JS execution time.

C It automatically caches components, reducing memory usage.

D It delays the initial page load by lazy loading components.

DevTools: Performance

How to check: Record a performance profile while loading the page and interacting with components. Look for long scripting times and many component initializations.

What to look for: High JS execution time and repeated component setup indicate inefficient component definitions.