Why the Composition API exists in Vue - Performance Evidence

Performance: Why the Composition API exists

MEDIUM IMPACT

This affects how Vue components load and update, impacting rendering speed and responsiveness.

Organizing reactive state and logic in Vue components

Vue

import { ref, watch } from 'vue';
export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    watch(count, (newVal) => {
      console.log('Count changed:', newVal);
    });
    return { count, increment };
  }
}

Composition API groups related reactive state and logic, enabling finer control over reactivity and reducing unnecessary updates.

📈 Performance GainReduces redundant reactivity triggers and improves update granularity, lowering INP.

Organizing reactive state and logic in Vue components

Vue

export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  watch: {
    count(newVal) {
      console.log('Count changed:', newVal);
    }
  }
}

Options API scatters related logic across data, methods, and watch, causing less predictable reactivity and more component re-renders.

📉 Performance CostTriggers multiple reactive dependencies and re-renders due to less granular control.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Options API scattered logic	More reactive dependencies	Multiple re-renders	Higher paint cost due to redundant updates	[X] Bad
Composition API grouped logic	Fewer reactive dependencies	Single targeted re-render	Lower paint cost with precise updates	[OK] Good

Rendering Pipeline

The Composition API organizes reactive dependencies more explicitly, allowing Vue's reactivity system to track changes precisely and update only affected parts of the DOM.

→Reactive Dependency Tracking

→Component Update

→DOM Patch

⚠️ BottleneckComponent Update stage due to unnecessary re-renders in less organized code

Core Web Vital Affected

INP

This affects how Vue components load and update, impacting rendering speed and responsiveness.

Optimization Tips

1Group related reactive state and logic with the Composition API for better update control.

2Avoid scattering reactive code across multiple Options API properties to reduce redundant reactivity.

3Use Vue DevTools Performance panel to monitor component update frequency and duration.

Performance Quiz - 3 Questions

How does the Composition API improve Vue component performance compared to the Options API?

A By removing reactivity completely

B By increasing the number of reactive dependencies

C By grouping reactive logic to reduce unnecessary re-renders

D By forcing full component reloads on every change

DevTools: Performance

How to check: Record a performance profile while interacting with the component, then inspect component update times and number of re-renders.

What to look for: Look for fewer component updates and shorter update durations indicating efficient reactive tracking.