Script setup syntax in Vue - Performance & Optimization

Performance: Script setup syntax

MEDIUM IMPACT

This affects the initial component compilation and runtime performance by simplifying component setup and reducing boilerplate code.

Defining component logic in Vue

Vue

<script setup>
import { ref } from 'vue';
const count = ref(0);
function increment() {
  count.value++;
}
</script>

Script setup compiles to more efficient code with less runtime overhead and smaller bundle size.

📈 Performance GainSaves ~2-3kb in bundle and speeds up component mount time

Defining component logic in Vue

Vue

export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}

This traditional options API adds extra runtime overhead and larger bundle size due to verbose structure.

📉 Performance CostAdds ~2-3kb more to bundle and triggers slower component initialization

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Options API	No difference	No difference	No difference	[!] OK
Script setup syntax	No difference	No difference	No difference	[OK] Good

Rendering Pipeline

Script setup syntax compiles Vue component logic at build time, reducing runtime parsing and setup cost.

→Compile

→JavaScript Execution

→Component Initialization

⚠️ BottleneckComponent Initialization

Core Web Vital Affected

LCP

This affects the initial component compilation and runtime performance by simplifying component setup and reducing boilerplate code.

Optimization Tips

1Use script setup to reduce component runtime overhead.

2Script setup syntax compiles logic at build time, improving load speed.

3Avoid options API for better bundle size and initialization performance.

Performance Quiz - 3 Questions

How does using Vue's script setup syntax affect bundle size compared to the options API?

A It increases bundle size due to extra imports

B It has no effect on bundle size

C It reduces bundle size by removing runtime overhead

D It doubles the bundle size

DevTools: Performance

How to check: Record a performance profile while loading the component and look at scripting and scripting evaluation times.

What to look for: Lower scripting time and faster component setup indicate better performance with script setup syntax.