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