Setup function basics in Vue - Performance & Optimization

Performance: Setup function basics

MEDIUM IMPACT

This affects the initial rendering speed and reactivity setup of Vue components.

Defining reactive state and computed properties inside the setup function

Vue

import { reactive, computed } from 'vue';
export default {
  setup() {
    const state = reactive({ count: 0 });
    const doubled = computed(() => state.count * 2);
    return { state, doubled };
  }
}

Simpler computed property avoids blocking initial render.

📈 Performance GainReduces blocking time to under 5ms

Defining reactive state and computed properties inside the setup function

Vue

import { reactive, computed } from 'vue';
export default {
  setup() {
    const state = reactive({ count: 0 });
    const doubled = computed(() => {
      // heavy computation inside computed
      let result = 0;
      for (let i = 0; i < 1000000; i++) {
        result += state.count * 2;
      }
      return result;
    });
    return { state, doubled };
  }
}

Heavy computation inside computed properties runs on initial render, blocking UI.

📉 Performance CostBlocks rendering for 50-100ms depending on device

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy computation in setup	Minimal	0	High due to JS blocking	[X] Bad
Simple reactive state in setup	Minimal	0	Low	[OK] Good
Data fetching inside setup	Minimal	0	Blocks LCP until data arrives	[X] Bad
Data fetching in onMounted hook	Minimal	0	Non-blocking initial paint	[OK] Good

Rendering Pipeline

The setup function runs before the component renders. Heavy logic here delays style calculation and layout.

→JavaScript Execution

→Style Calculation

→Layout

⚠️ BottleneckJavaScript Execution blocking initial render

Core Web Vital Affected

LCP

This affects the initial rendering speed and reactivity setup of Vue components.

Optimization Tips

1Avoid heavy computations inside the setup function to prevent blocking initial render.

2Defer asynchronous tasks like data fetching to lifecycle hooks such as onMounted.

3Keep reactive state initialization simple and fast for better LCP.

Performance Quiz - 3 Questions

What is the main performance risk of doing heavy computations inside the setup function?

A It causes excessive DOM nodes to be created.

B It increases network requests.

C It blocks the initial rendering and delays Largest Contentful Paint.

D It causes layout shifts after render.

DevTools: Performance

How to check: Record a performance profile while loading the component and look for long scripting tasks during setup.

What to look for: Long 'Evaluate Script' tasks blocking the main thread before first paint indicate heavy setup logic.