Skip to main content

Чим відрізняються хуки в Options API і Composition API?

VueJunior~2 хв читання
Запропонувати правку

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

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

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

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

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

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