Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Чим відрізняються хуки в Options API і Composition API?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 1. Основна відмінність - *де і як* вони використовуються

### Options API - хуки - це **методи об'єкта**

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

### Composition API - хуки - це **імпортовані функції**

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

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

---

## 2. Різниця в контексті (`this`)

### Options API

Хуки викликаються всередині об'єкта ->
у них доступний `this`:

```javascript
mounted() {
  console.log(this.user) // працює
}
```

### Composition API

Немає контексту `this` - усе явно:

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

onMounted(() => {
  console.log(user.value) // працює
})
```

Composition API позбавляє від плутанини з `this`.

---

## 3. Різниця в організації коду

### Options API

Логіка розкидана по секціях об'єкта:

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

Якщо логіка складається з кількох частин - вона дробиться і розкидана по файлу.

### Composition API

Логіка групується за змістом:

```javascript
const isOpen = ref(false)

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

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

Логіка, *пов'язана між собою*, розташована поруч -> код чистіший і легший у підтримці.

---

## 4. Життєвий цикл - однаковий, але імена хуків відрізняються

### Options API:

- mounted
- updated
- unmounted
- ...

### Composition API:

- onMounted
- onUpdated
- onUnmounted
- ...

Сенс той самий - імена просто інші.

---

## 5. У Composition API хуки можна викликати з composables

Це **головна перевага** Vue 3.

Ти можеш винести логіку у функцію:

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

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

return { data }
}
```

І використовувати в будь-якому компоненті:

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

В Options API так робити не можна - хуки прив'язані строго до компонента.

---

## 6. Options API має 2 унікальних хуки

(яких немає в Composition API)

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

Чому їх немає в Composition API?
Тому що `setup()` сам **і є** фазою created.

---

## 7. У `<script setup>` усі хуки автоматично належать компоненту

Жодних `setup()` вручну, просто:

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

Vue сам розуміє, що хуки належать поточному компоненту.

---

## Таблиця порівняння

| Характеристика | Options API | Composition API |
|---|---|---|
| Як викликаються | як методи | як функції |
| Використовують `this` | так | ні |
| Групування логіки | за типом (data/methods/...) | за змістом |
| Винесення логіки (composables) | обмежено | повноцінно |
| Унікальні хуки | beforeCreate, created | немає, замінені setup() |
| Підходить для | невеликих компонентів | великих проєктів, складної логіки |
| Читабельність | простіше новачкам | краще у великих проєктах |

---

## Підсумок (шпаргалка)

**Options API**: хуки - це методи об'єкта, є `this`, логіка розкидана.
**Composition API**: хуки - це функції, `this` немає, логіка групується за змістом, хуки можна використовувати всередині composables.

Хуки роблять одне й те саме, але виглядають і організовуються по-різному.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати496 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.