The Vue Composition API provides a flexible and scalable way to organize component logic using functions like setup(), ref(), and reactive(). It was introduced in Vue 3 to improve reusability, maintainability, and TypeScript support compared to the Options API.
What are Vue Composition APIs (setup(), ref, reactive) and why were they introduced?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
Overview
The Composition API is a new way to write components in Vue 3. It provides greater flexibility and control over organizing logic inside components by using functions like setup(), ref(), and reactive(). This API was introduced to address the limitations of the traditional Options API, making complex component logic easier to read, reuse, and test.
Why the Composition API Was Introduced
In large applications, the Options API (using data, methods, computed, etc.) often leads to scattered logic — related code gets separated into different options, making it harder to maintain and reuse. The Composition API solves this by allowing developers to group related logic together using plain JavaScript functions.
JAVASCRIPT
// Example of Composition API
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
};
</script>
Key Concepts in the Composition API
1. setup() Function
The setup() function is the entry point of the Composition API. It runs before the component is created and is used to declare reactive state, computed properties, watchers, and lifecycle hooks.
Anything returned from setup() becomes available in the component template.
JAVASCRIPT
setup() {
const name = ref('Mina');
const greet = () => console.log(`Hello, ${name.value}!`);
return { name, greet };
}
2. ref()ref() creates a reactive reference to a primitive value (like numbers, strings, or booleans). When you update ref.value, Vue automatically tracks and re-renders any parts of the UI that depend on it.
JAVASCRIPT
const message = ref('Hello');
message.value = 'Hi there!';
3. reactive()reactive() creates a reactive object instead of a primitive. It’s ideal for tracking multiple properties within an object or array.
JAVASCRIPT
const user = reactive({ name: 'Alice', age: 25 });
user.age++; // Triggers reactivity automatically
4. Combining ref() and reactive()
You can combine both approaches — use ref() for single values and reactive() for complex objects. They can also be mixed within the same component for flexibility.
JAVASCRIPT
const count = ref(0);
const user = reactive({ name: 'Mina', score: 10 });
Advantages of the Composition API
- Better logic organization and reuse through composable functions.
- Improved TypeScript support and static analysis.
- Cleaner separation of concerns for large components.
- Fully compatible with existing Options API — both can coexist in the same project.
Think of the Composition API as building blocks: instead of being restricted to predefined sections (data, methods, computed), you freely compose logic like LEGO pieces — reusable, organized, and scalable.
Summary
Summary
setup()is the core entry point for the Composition API.ref()makes primitive values reactive.reactive()makes entire objects reactive.- Introduced to improve reusability, readability, and TypeScript compatibility.
Similar questions
Guides