Suggest an edit

Improve this article

Refine the answer for “What is the Composition API?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**The Composition API** is a **modern way of writing components in Vue 3** that lets you **organize logic flexibly** using plain JavaScript functions and variables, without splitting code across options (`data`, `methods`, `computed`, and so on).

---

## Main idea

Instead of describing a component as an object (Options API),
we describe **all of its logic inside a function** called `setup()` or, more often, inside `<script setup>`.

The Composition API solves the problem of code fragmentation, where in large components the logic of a single process used to be "scattered" across different sections (`data`, `computed`, `methods`, `watch`).

---

## A component example with the Composition API

```javascript
<template>
  <div>
    <p>Counter: {{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

const count = ref(0)

function increment() {
  count.value++
}
</script>
```

Here everything is simple:

- `ref()` creates a reactive variable;
- `count.value` is the current value;
- the `increment()` function changes the state;
- the template updates automatically whenever `count` changes.

---

## Core elements of the Composition API

| Concept | Description |
|---|---|
| `setup()` / `<script setup>` | Entry point for the component's logic |
| `ref()` | Creates a reactive value (for primitives) |
| `reactive()` | Makes an object reactive |
| `computed()` | Creates a computed value |
| `watch()` | Reacts to data changes |
| `onMounted()`, `onUnmounted()` | Lifecycle hooks |
| `defineProps()`, `defineEmits()` | Declare input props and events |
| `provide()` / `inject()` | Passes dependencies down the component tree |
| `composables` | Functions for reusing logic (analogous to hooks in React) |

---

## Comparison with the Options API

| Criterion | **Options API** | **Composition API** |
|---|---|---|
| Code organization | Split across options (`data`, `methods`, `computed`) | Grouped by logic and functions |
| Context | Uses `this` | Uses plain variables |
| Logic reuse | Via mixins (less convenient) | Via composable functions |
| TypeScript support | Limited | Excellent, thanks to static analysis |
| Scalability | Good for small components | Excellent for complex projects |
| Learning curve | Easier for beginners | Requires a basic understanding of reactivity and JS |

---

## Example: `reactive`, `computed`, `watch`

```javascript
<script setup>
import { reactive, computed, watch } from 'vue'

const state = reactive({ count: 0 })

const doubled = computed(() => state.count * 2)

watch(() => state.count, (newVal) => {
  console.log('Count changed:', newVal)
})

function increment() {
  state.count++
}
</script>
```

---

## Composable function example

A composable is simply a JS function that uses the Composition API to build logic that can be reused.

```javascript
// useCounter.js
import { ref } from 'vue'

export function useCounter(initial = 0) {
  const count = ref(initial)
  const increment = () => count.value++
  const reset = () => (count.value = 0)
  return { count, increment, reset }
}
```

```javascript
<script setup>
import { useCounter } from './useCounter'

const { count, increment, reset } = useCounter(10)
</script>
```

---

## Advantages of the Composition API

**Flexibility and scalability** - convenient for grouping code into logical blocks
**Better logic reuse** - through composables
**Excellent TypeScript support**
**Less "magic"** - uses plain JS
**Compatible with the Options API** - the two approaches can be mixed

---

## Summary

> **The Composition API** is a new way of writing components in Vue 3
> that lets you use plain functions and variables to describe reactive logic.
>
> It makes code more **flexible, reusable, and scalable**, especially in large applications.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts591 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.