Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке Composition API?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Composition API** - це сучасний спосіб написання компонентів у Vue 3, який дозволяє організовувати логіку за функціональністю, а не за опціями (`data`, `methods`, `computed`...), як в Options API. **Ключове:** це набір функцій (`ref`, `reactive`, `computed`, `watch`, `onMounted` та ін.), які дозволяють створювати логіку компонента всередині `setup()`.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Composition API** - це сучасний спосіб написання компонентів у Vue 3, який дозволяє **організовувати логіку за функціональністю**, а не за опціями (`data`, `methods`, `computed`...), як в Options API. Простіше кажучи: > **Composition API - це набір функцій (**`ref`**,** `reactive`**,** `computed`**,** `watch`**,** `onMounted` **та ін.), які дозволяють створювати логіку компонента всередині** `setup()`**, як конструктор логіки.** Він створений для кращої структуризації складних компонентів і зручного повторного використання коду. --- ## Чим Composition API відрізняється від Options API? В **Options API** код розділений по секціях: ```js export default { data() { ... }, methods: { ... }, computed: { ... }, mounted() { ... } } ``` У результаті логіка, що стосується однієї задачі, може бути **розкидана по різних блоках**. --- У **Composition API** вся пов'язана логіка - поруч одна з одною: ```js <script setup> import { ref, onMounted } from 'vue' const count = ref(0) function increment() { count.value++ } onMounted(() => { console.log("Компонент змонтовано") }) </script> ``` --- ## Головна ідея Composition API > **Об'єднати пов'язану логіку у функції, а не розкидати її по різних секціях компонента.** Так простіше: - підтримувати великі компоненти - повторно використовувати логіку - створювати власні хуки (`useSomething()`) - читати і розуміти код --- ## Ключові функції Composition API ### Реактивність - `ref()` - `reactive()` - `computed()` - `watch()` - `watchEffect()` ### Життєвий цикл - `onMounted()` - `onUpdated()` - `onUnmounted()` - `onBeforeMount()` - `onActivated()` / `onDeactivated()` ### Структурування коду - `setup()` - `<script setup>` (рекомендований синтаксис) --- ## Приклад: лічильник з Composition API ```vue <script setup> import { ref } from 'vue' const count = ref(0) function increment() { count.value++ } </script> <template> <button @click="increment">Count: {{ count }}</button> </template> ``` --- ## Коли Composition API корисніший за все? #### 1. **Великі компоненти** Легше розбивати логіку на "модулі". #### 2. **Повторно використовувана логіка (композабли)** Можна писати свої хуки: ```js function useCounter() { const count = ref(0) const inc = () => count.value++ return { count, inc } } ``` #### 3. **Кращий контроль над реактивністю** Можна писати гнучкі watchers, computed, side-effects. #### 4. **Більш читабельні складні компоненти** Немає потреби стрибати між секціями. #### 5. **Дружність до TypeScript** Composition API проєктувався з урахуванням TS. --- ## Що таке `<script setup>`? У Vue 3.2 додали спрощений синтаксис: ```vue <script setup> import { ref } from 'vue' const msg = ref('Hello') </script> ``` Це: - коротше - швидше - автоматично робить усе, що зазвичай робив `setup()` І є **рекомендованим способом** писати компоненти.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.