Why components are essential in Vue - Performance Evidence

Performance: Why components are essential

MEDIUM IMPACT

Using components affects how the browser manages DOM updates and rendering efficiency.

Building a UI with reusable parts

Vue

<template>
  <div>
    <TitleComponent />
    <ParagraphComponent text="Paragraph 1" />
    <ParagraphComponent text="Paragraph 2" />
    <ButtonComponent @click="update" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import TitleComponent from './TitleComponent.vue'
import ParagraphComponent from './ParagraphComponent.vue'
import ButtonComponent from './ButtonComponent.vue'
const count = ref(0)
function update() {
  count.value++
}
</script>

Each part is a separate component, so only the changed component re-renders, reducing DOM updates.

📈 Performance GainReduces re-renders to only affected components, improving interaction speed and reducing layout thrashing.

Building a UI with reusable parts

Vue

<template>
  <div>
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <button @click="update">Click me</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
function update() {
  count.value++
}
</script>

All UI elements are in one big component, so any state change triggers re-render of the entire block.

📉 Performance CostTriggers full component re-render and multiple DOM updates even if only one part changes.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Single large component	Many nodes updated on any change	Multiple reflows per update	High paint cost due to large redraw	[X] Bad
Small reusable components	Only changed component nodes updated	Single or minimal reflows	Lower paint cost with targeted redraw	[OK] Good

Rendering Pipeline

Components help the browser isolate updates to smaller DOM subtrees, minimizing style recalculations and layout.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout is most expensive when large DOM trees re-render unnecessarily.

Core Web Vital Affected

INP

Using components affects how the browser manages DOM updates and rendering efficiency.

Optimization Tips

1Break UI into small components to limit DOM updates.

2Avoid large monolithic components that re-render fully on any change.

3Use components to improve interaction responsiveness and reduce layout thrashing.

Performance Quiz - 3 Questions

How do components improve interaction performance in Vue?

A By limiting DOM updates to only changed components

B By increasing the number of DOM nodes on the page

C By forcing full page reloads on every change

D By disabling browser caching

DevTools: Performance

How to check: Record a performance profile while interacting with the UI. Look for long scripting and layout times.

What to look for: Check if layout and paint times are high and if many nodes are updated on small state changes.

Practice

1. Why are components essential in Vue applications?

easy

A. They break a large app into smaller, manageable parts.

B. They make the app run faster by default.

C. They replace the need for HTML and CSS.

D. They automatically fix bugs in the code.

Solution

1. Step 1: Understand the role of components

   Components divide a big app into smaller pieces that are easier to build and maintain.

2. Step 2: Evaluate other options

   Options B, C, and D describe incorrect or exaggerated benefits not true for components.

3. Final Answer:

   They break a large app into smaller, manageable parts. -> Option A

4. Quick Check:

   Components simplify app structure = A [OK]

Hint: Components split big apps into small parts for easier work [OK]

Common Mistakes:

• Thinking components speed up app automatically
• Believing components replace HTML/CSS
• Assuming components fix bugs by themselves

2. Which of the following is the correct way to define a simple Vue component?

easy

A. new Vue.component('my-comp', 'Hello')

B. component Vue('my-comp') { template: 'Hello' }

C. Vue.component('my-comp', { template: 'Hello' })

D. Vue.createComponent('my-comp', { template: 'Hello' })

Solution

1. Step 1: Recall Vue component syntax

   The correct syntax uses Vue.component('name', { template: '...' }) to define a global component.

2. Step 2: Check each option

   Only Vue.component('my-comp', { template: '
   Hello' })
   matches the correct Vue syntax; others have invalid keywords or methods.

3. Final Answer:

   Vue.component('my-comp', { template: '<div>Hello</div>' }) -> Option C

4. Quick Check:

   Vue.component() defines components = C [OK]

Hint: Vue.component('name', { template }) is correct syntax [OK]

Common Mistakes:

• Using wrong keywords like 'component Vue' or 'new Vue.component'
• Confusing method names like createComponent
• Omitting the object braces around template

3. Given this Vue component code, what will be displayed?

const app = Vue.createApp({
  components: {
    'greet-msg': {
      template: '
Hello, Vue!
'
    }
  }
})
app.mount('#app')

And HTML: <div id="app"><greet-msg></greet-msg></div>

medium

A. Hello, World!

B. Nothing will display

C. Error: Unknown component

D. Hello, Vue!

Solution

1. Step 1: Understand component registration and usage

   The component 'greet-msg' is registered locally inside the app and used in the HTML with the same tag.

2. Step 2: Predict rendered output

   The template of 'greet-msg' is '

   Hello, Vue!

   ', so this will appear inside the div with id 'app'.

3. Final Answer:

   <p>Hello, Vue!</p> -> Option D

4. Quick Check:

   Registered component renders its template = A [OK]

Hint: Registered component tag shows its template content [OK]

Common Mistakes:

• Thinking component must be global to render
• Expecting default text instead of template
• Confusing component name casing

4. What is wrong with this Vue component code?

const app = Vue.createApp({
  components: {
    'my-button': {
      template: 'Click me'
    }
  }
})
app.mount('#app')

// HTML: <my-button></my-button>

medium

A. Nothing is wrong; the component will render correctly.

B. Component name must be in camelCase, not kebab-case.

C. The component is missing a data function.

D. The component is not registered globally, so it won't render.

Solution

1. Step 1: Check component registration and usage

   The component 'my-button' is registered locally in the app and used with the same kebab-case tag in HTML, which is correct.

2. Step 2: Verify component requirements

   A data function is not required if the component has no reactive data. The name kebab-case is valid in templates.

3. Final Answer:

   Nothing is wrong; the component will render correctly. -> Option A

4. Quick Check:

   Local component with matching tag renders fine = B [OK]

Hint: Kebab-case names work in templates; data function optional if unused [OK]

Common Mistakes:

• Thinking kebab-case is invalid for component names
• Assuming data() is always required
• Confusing local and global registration effects

5. You want to reuse a button with different labels in multiple places. Which approach best uses Vue components to achieve this?

hard

A. Create a component that hardcodes the label inside the template.

B. Create one button component with a label prop to set the text dynamically.

C. Use plain HTML buttons everywhere without components.

D. Write separate components for each button label you need.

Solution

1. Step 1: Understand reusability with props

   Using a prop allows one component to display different labels dynamically, making it reusable.

2. Step 2: Evaluate other options

   Creating separate components or hardcoding labels reduces reuse and increases code duplication. Using plain HTML loses component benefits.

3. Final Answer:

   Create one button component with a label prop to set the text dynamically. -> Option B

4. Quick Check:

   Props enable reusable components with dynamic content = D [OK]

Hint: Use props to pass different labels to one reusable component [OK]

Common Mistakes:

• Making many components for each label instead of one reusable
• Hardcoding text inside component template
• Avoiding components and using plain HTML only