Враховуючи заяву розробників Vue про завершення підтримки Vue 2 до кінця 2023 року, перехід на Vue 3 стає необхідністю для всіх, хто використовує цей фреймворк.
Разом з цим оновленням, з’являється Composition API, інструмент, який відкриває можливості для більш модульної, декларативної та надійної розробки застосунків Vue.
Що ж таке Composition API?
Composition API є значним кроком вперед у порівнянні з підходом Options API, пропонуючи новий спосіб конструювання компонентів Vue. Цей стиль програмування сприяє створенню декларативного коду, де розробник зосереджується на логіці застосунку, а не на деталях його реалізації.
Чому з’явився Composition API?
Розробники Vue зіткнулися зі складнощами розробки великих веб-додатків, використовуючи Options API. У міру зростання проектів, управління логікою компонентів ставало все складнішим, що ускладнювало підтримку, особливо в командних розробках.
Традиційний підхід з Options API часто призводив до перенасичення компонентів великою кількістю властивостей, що ускладнювало розуміння та подальшу підтримку коду.
Повторне використання логіки в різних компонентах також виявлялося проблемою. Розподіл логіки між різними хуками життєвого циклу та методами створював додаткові труднощі у сприйнятті загальної поведінки компонента.
Переваги використання Composition API
Composition API має кілька значних переваг у порівнянні з Options API.
1. Покращена продуктивність
У Vue 3 запроваджено нову систему візуалізації на основі Proxy-based Reactivity System. Ця система оптимізує продуктивність за рахунок зменшення споживання пам’яті та покращення реактивності. Завдяки цьому, Vue 3 ефективніше обробляє великі структури компонентів.
2. Зменшений розмір пакету
Завдяки оптимізованій кодовій базі та механізму tree-shaking, Vue 3 має менший розмір пакету у порівнянні з Vue 2. Це зменшення розміру сприяє прискореному завантаженню та покращенню загальної продуктивності.
3. Покращена організація коду
Використовуючи Composition API, код компонента можна організувати у менші, багаторазово використовувані функції. Це сприяє кращому розумінню та підтримці, особливо великих та складних компонентів.
4. Повторне використання компонентів та функцій
Функції, створені за допомогою Composition API, легко інтегруються у різні компоненти, що полегшує обмін кодом та створення бібліотек багаторазових елементів.
5. Покращена підтримка TypeScript
Composition API забезпечує кращу інтеграцію з TypeScript, що дозволяє більш точно визначати типи та легше ідентифікувати помилки, пов’язані з типами, під час розробки.
Порівняння Options API та Composition API
Тепер, коли ви розумієте теоретичні основи Composition API, можна перейти до його практичного застосування. Давайте порівняємо ключові аспекти обох підходів, щоб зрозуміти переваги Composition API.
Реактивні дані у Vue 3
Реактивні дані – це фундаментальна концепція у Vue, яка забезпечує автоматичне оновлення інтерфейсу користувача при зміні даних у програмі.
У Vue 2 реактивність базувалася на методі Object.defineProperty і використовувала об’єкт `data`, який містив усі реактивні властивості.
Коли ви визначали властивість `data` у компоненті Vue, Vue автоматично обгортав її у спеціальний об’єкт з методами `get` та `set`, використовуючи нові можливості сценаріїв ECMA (ES6).
Ці методи `get` та `set` відстежували залежності між властивостями та оновлювали інтерфейс користувача, коли ви змінювали будь-яку з них.
Ось приклад створення реактивних даних у Vue 2, використовуючи Options API:
<template>
<div>
<p>Лічильник: {{ count }}</p>
<button @click="increment">Збільшити</button>
</div>
</template><script>
export default {
data() {
return {
count: 0,
};
},methods: {
increment() {
this.count++;
},
},
};
</script>
Цей код демонструє створення змінних у Vue 2. Vue автоматично робить змінні, визначені в об’єкті `data`, реактивними. Зміни значення властивості `count` призведуть до оновлення інтерфейсу користувача.
Також, об’єкт `methods` використовується для визначення JavaScript функцій у компоненті. У цьому прикладі, метод `increment()` збільшує значення `count` на 1.
У Vue 2 для доступу до змінних в об’єкті `data` необхідно використовувати ключове слово `this` (наприклад, `this.count++`). Його відсутність призведе до помилки.
У Vue 3, система реактивності на основі проксі-серверів використовує можливості JavaScript для досягнення реактивності. Це забезпечує значне покращення продуктивності та обробки залежностей.
Для визначення реактивних даних у Vue 3 використовуються функції `ref` або `reactive`. Функція `ref` створює реактивне посилання на значення, тоді як `reactive` створює реактивний об’єкт з кількома властивостями.
Ось приклад створення реактивних даних за допомогою функції `ref` у Vue 3:
<script setup>
import { ref } from 'vue';const count = ref(0);
function increment() {
count.value++;
}
</script><template>
<div>
<p>Лічильник: {{ count }}</p>
<button @click="increment">Збільшити</button>
</div>
</template>
Для використання `ref()` у Vue 3, необхідно імпортувати її з пакета `vue`. Функція `ref()` створює реактивні посилання на змінні.
У прикладі, змінна `count` створюється за допомогою `ref()` і встановлюється її початкове значення 0. `ref()` повертає об’єкт з властивістю `value`, що зберігає фактичне значення лічильника.
Директива `@click` використовується для обробки подій кліку у Vue.
Функції, необхідні у компоненті, визначаються у блоці `