Ponieważ twórcy Vue ogłosili, że życie Vue 2 zakończy się do 31 grudnia 2023 r., zachęca się programistów do przejścia na Vue 3.
Wraz z tym przejściem pojawia się Composition API, funkcja oferująca bardziej modułowe, deklaratywne i bezpieczne podejście do tworzenia aplikacji Vue.
Spis treści:
Co to jest interfejs API kompozycji?
Interfejs API Composition reprezentuje zmianę paradygmatu w pisaniu komponentów Vue z obiektu Options. Ten styl programowania przyjmuje bardziej deklaratywne podejście, co pozwala skupić się na budowaniu aplikacji Vue, abstrahując od szczegółów implementacji.
Motywacja dla interfejsu API kompozycji
Twórcy Vue dostrzegli wyzwania związane z budowaniem złożonych aplikacji internetowych za pomocą obiektu Options. W miarę rozwoju projektów zarządzanie logiką komponentu stało się mniej skalowalne i trudniejsze w utrzymaniu, szczególnie w środowiskach współpracy.
Tradycyjne podejście do obiektu Opcji często skutkowało wieloma właściwościami komponentów, co utrudniało zrozumienie i utrzymanie kodu.
Ponadto ponowne wykorzystanie logiki komponentów w różnych komponentach stało się kłopotliwe. Rozproszona logika w różnych hakach i metodach cyklu życia również zwiększyła złożoność zrozumienia ogólnego zachowania komponentu.
Korzyści z interfejsu API kompozycji
Interfejs API kompozycji ma kilka zalet w porównaniu z interfejsem API opcji.
1. Poprawiona wydajność
Vue 3 wprowadza nowy mechanizm renderowania zwany systemem reaktywności opartym na proxy. System ten zapewnia lepszą wydajność poprzez zmniejszenie zużycia pamięci i poprawę reaktywności. Nowy system reaktywności umożliwia Vue 3 efektywniejszą obsługę większej liczby gigantycznych drzew komponentów.
2. Mniejszy rozmiar pakietu
Dzięki zoptymalizowanej bazie kodu i obsłudze trzęsienia drzew, Vue 3 ma mniejszy rozmiar pakietu niż Vue 2. To zmniejszenie rozmiaru pakietu prowadzi do szybszego ładowania i lepszej wydajności.
3. Ulepszona organizacja kodu
Wykorzystując interfejs API Composition, możesz uporządkować kod swojego komponentu w mniejsze funkcje, które można ponownie wykorzystać. Sprzyja to lepszemu zrozumieniu i konserwacji, szczególnie w przypadku dużych i złożonych komponentów.
4. Możliwość ponownego użycia komponentów i funkcji
Funkcje kompozycji można łatwo ponownie wykorzystać w różnych komponentach, ułatwiając udostępnianie kodu i tworzenie biblioteki funkcji wielokrotnego użytku.
5. Lepsza obsługa TypeScriptu
Interfejs API Composition zapewnia bardziej wszechstronną obsługę TypeScriptu, umożliwiając dokładniejsze wnioskowanie o typie i łatwiejszą identyfikację błędów związanych z typem podczas programowania.
Porównanie obiektu opcji i interfejsu API kompozycji
Teraz, gdy znasz już teorię dotyczącą Composition API, możesz zacząć używać go w praktyce. Aby zrozumieć zalety interfejsu Composition API, porównajmy niektóre kluczowe aspekty obu podejść.
Dane reaktywne w Vue 3
Dane reaktywne to podstawowa koncepcja w Vue, która pozwala, aby zmiany danych w aplikacji automatycznie uruchamiały aktualizacje w interfejsie użytkownika.
Vue 2 oparł swój system reaktywny na metodzie Object.defineProperty i oparł się na obiekcie danych zawierającym wszystkie właściwości reaktywne.
Kiedy zdefiniowałeś właściwość danych za pomocą opcji danych w komponencie Vue, Vue automatycznie opakował każdą właściwość w obiekt danych za pomocą modułów pobierających i ustawiających, co jest nową funkcją skryptu ECMA (ES6).
Te moduły pobierające i ustawiające śledziły zależności między właściwościami i aktualizowały interfejs użytkownika po zmodyfikowaniu dowolnej właściwości.
Oto przykład tworzenia danych reaktywnych w Vue 2 za pomocą obiektu 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>
Blok kodu demonstruje, jak tworzyć zmienne w Vue 2. Vue sprawia, że zmienne zdefiniowane w obiekcie danych stają się automatycznie reaktywne. Zmiany wprowadzone we właściwości danych (liczba) spowodują aktualizację interfejsu użytkownika aplikacji.
Dodatkowo użyłeś obiektu metod do zdefiniowania funkcji JavaScript używanych w komponencie. W tym przykładzie fragment definiuje metodę inkrementacji(), która zwiększa wartość zmiennej count o 1.
Podczas pisania funkcji jako metod w Vue 2 konieczne było również użycie słowa kluczowego this (this.count++). Słowo kluczowe this pozwala wskazać zmienne w obiekcie danych. Pominięcie słowa kluczowego this spowoduje błąd podczas montowania komponentu przez Vue.
System reaktywności oparty na proxy Vue 3 wykorzystuje proxy JavaScript do osiągnięcia reaktywności, co zapewnia znaczną poprawę wydajności i lepszą obsługę reaktywnych zależności.
Funkcje ref lub reactive służą do definiowania danych reaktywnych w Vue 3. Funkcja ref tworzy pojedyncze reaktywne odwołanie do wartości, podczas gdy funkcja reactive tworzy reaktywny obiekt zawierający wiele właściwości.
Oto przykład tworzenia danych reaktywnych za pomocą funkcji ref w 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>
Aby użyć funkcji ref() w Vue 3, musisz najpierw zaimportować ją z pakietu vue. Funkcja ref() tworzy reaktywne odniesienia do zmiennych.
Przykładowy blok kodu tworzy zmienną count za pomocą funkcji ref() i ustawia jej wartość początkową na 0. Funkcja ref() zwraca obiekt z właściwością value. Ta właściwość value przechowuje rzeczywistą wartość licznika.
Dyrektywa @click służy do obsługi zdarzeń kliknięcia w Vue.
Funkcje potrzebne w komponencie definiujesz w bloku konfiguracyjnym skryptu. Vue 3 zastąpiło składnię metod definiowania funkcji w Vue 2 zwykłymi funkcjami JavaScript.
Możesz teraz uzyskać dostęp do zmiennych reaktywnych zdefiniowanych za pomocą funkcji ref(), dołączając metodę wartości do nazwy zmiennej. Na przykład blok kodu używa count.value w celu odniesienia się do wartości zmiennej count.
Funkcja obliczona w Vue 3
Funkcja Computed to kolejna funkcja Vue, która umożliwia definiowanie wartości pochodnych na podstawie danych reaktywnych. Obliczone właściwości są automatycznie aktualizowane za każdym razem, gdy zmieniają się ich zależności, dzięki czemu uzyskana wartość jest zawsze aktualna.
W Vue 2 definiujesz obliczone zachowanie za pomocą obliczonej opcji w komponencie. Oto przykład:
<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>
W powyższym przykładzie obliczona właściwość doubleCount zależy od właściwości danych count. Za każdym razem, gdy zmienia się właściwość count, Vue ponownie oblicza właściwość doubleCount.
W wersji 3 interfejs API Composition wprowadza nowy sposób definiowania obliczanych właściwości za pomocą funkcji obliczanej. Oto jak to wygląda:
<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>
Aby móc korzystać z tej funkcji, należy zaimportować funkcję obliczoną z pakietu vue.
Zdefiniowałeś obliczone odwołanie doubleCount w powyższym bloku kodu za pomocą funkcji obliczeniowej. Vue 3 odnosi się do obliczonych właściwości jako do obliczonych odnośników, podkreślając ich zależność od zmiennych reaktywnych.
Obliczona funkcja przyjmuje jako argument funkcję pobierającą, która oblicza wartość pochodną na podstawie danych reaktywnych. W tym przypadku obliczony ref doubleCount zwraca pomnożenie zmiennej reaktywnej count przez 2.
Należy zauważyć, że bloki kodu oparte na interfejsie API Composition są bardziej czytelne i zwięzłe niż te zapisane za pomocą obiektu Options.
Naucz się tworzyć niestandardowe dyrektywy w Vue
Interfejs API kompozycji Vue 3 oferuje potężne i elastyczne podejście do organizowania i ponownego wykorzystywania kodu w komponentach Vue. Za pomocą interfejsu Composition API możesz tworzyć bardziej modułowe i łatwe w utrzymaniu aplikacje Vue.
Vue oferuje także dodatkowe funkcje maksymalizujące produktywność podczas tworzenia aplikacji internetowych. Możesz nauczyć się tworzyć niestandardowe dyrektywy, aby ponownie używać określonych funkcji w różnych częściach aplikacji Vue.