Suggest an edit

Improve this article

Refine the answer for “How do hooks differ in the Options API and 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)

## 1. The main difference - *where and how* they are used

### Options API - hooks are **object methods**

```javascript
export default {
  mounted() {
    console.log('Component mounted')
  }
}
```

### Composition API - hooks are **imported functions**

```javascript
import { onMounted } from 'vue'

onMounted(() => {
  console.log('Component mounted')
})
```

---

## 2. The difference in context (`this`)

### Options API

Hooks are called inside the object ->
`this` is available inside them:

```javascript
mounted() {
  console.log(this.user) // works
}
```

### Composition API

There is no `this` context - everything is explicit:

```javascript
const user = ref('Tim')

onMounted(() => {
  console.log(user.value) // works
})
```

Composition API removes the confusion around `this`.

---

## 3. The difference in code organization

### Options API

Logic is spread across the object's sections:

- `data`
- `methods`
- `computed`
- `mounted`
- `watch`
- ...

If the logic consists of several parts, it gets split up and scattered across the file.

### Composition API

Logic is grouped by meaning:

```javascript
const isOpen = ref(false)

function toggle() {
  isOpen.value = !isOpen.value
}

onMounted(() => {
  syncWithServer()
})
```

Logic that *belongs together* sits next to each other -> the code is cleaner and easier to maintain.

---

## 4. The lifecycle is the same, but the hook names differ

### Options API:

- mounted
- updated
- unmounted
- ...

### Composition API:

- onMounted
- onUpdated
- onUnmounted
- ...

The meaning is 1 to 1, only the names differ.

---

## 5. In the Composition API, hooks can be called from composables

This is **the main advantage** of Vue 3.

You can extract the logic into a function:

```javascript
export function useFetch(url) {
  const data = ref(null)

onMounted(async () => {
    data.value = await fetch(url).then(r => r.json())
  })

return { data }
}
```

And use it in any component:

```javascript
const { data } = useFetch('/api/users')
```

You cannot do this in the Options API - hooks are strictly tied to the component.

---

## 6. The Options API has 2 unique hooks

(that do not exist in the Composition API)

- **beforeCreate**
- **created**

Why don't they exist in the Composition API?
Because `setup()` itself **is** the created phase.

---

## 7. In `<script setup>` all hooks automatically belong to the component

No manual `setup()`, just:

```javascript
<script setup>
onMounted(() => {})
onUnmounted(() => {})
</script>
```

Vue itself understands that the hooks belong to the current component.

---

## Comparison table

| Characteristic | Options API | Composition API |
|---|---|---|
| How they are called | as methods | as functions |
| Use `this` | yes | no |
| Logic grouping | by type (data/methods/...) | by meaning |
| Extracting logic (composables) | limited | fully |
| Unique hooks | beforeCreate, created | none, replaced by setup() |
| Suited for | small components | large projects, complex logic |
| Readability | easier for beginners | better in large projects |

---

## Summary (cheat sheet)

**Options API**: hooks are object methods, `this` exists, logic is scattered.
**Composition API**: hooks are functions, there is no `this`, logic is grouped by meaning, hooks can be used inside composables.

Hooks do the same thing, but they look and are organized differently.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.