Migracja do API kompozycji Vue 3 w celu lepszego rozwoju komponentów

W związku z ogłoszeniem przez twórców Vue o zakończeniu wsparcia dla Vue 2 z dniem 31 grudnia 2023 roku, programiści są zachęcani do migracji na wersję Vue 3.

Wraz z tą aktualizacją pojawia się Composition API, narzędzie oferujące bardziej modułowe, oparte na deklaracjach i bezpieczniejsze podejście do budowania aplikacji w środowisku Vue.

Czym jest Composition API?

Composition API to zmiana koncepcji pisania komponentów Vue, odchodząca od obiektu Options. Ten styl programowania stawia na bardziej deklaratywne podejście, pozwalając skupić się na logice aplikacji, odsuwając na bok szczegóły implementacji.

Motywacje stojące za Composition API

Twórcy Vue zauważyli trudności związane z tworzeniem złożonych aplikacji internetowych przy użyciu obiektu Options. Wraz z rozrostem projektów zarządzanie logiką komponentu stawało się mniej elastyczne i trudniejsze w utrzymaniu, zwłaszcza w zespołach.

Tradycyjne podejście z obiektem Options często prowadziło do dużej liczby właściwości komponentów, co utrudniało zrozumienie i konserwację kodu.

Ponadto, ponowne wykorzystanie logiki w różnych komponentach było kłopotliwe. Rozproszona logika w różnych metodach cyklu życia również zwiększała złożoność zrozumienia działania komponentu jako całości.

Zalety Composition API

Composition API oferuje szereg korzyści w porównaniu z obiektem Options.

1. Zwiększona wydajność

Vue 3 wprowadza nowy mechanizm renderowania, oparty na systemie reaktywności proxy. Ten system zapewnia lepszą wydajność poprzez optymalizację zużycia pamięci i ulepszenie reaktywności. Nowy system umożliwia Vue 3 sprawniejszą obsługę rozbudowanych struktur komponentów.

2. Mniejszy rozmiar pakietu

Dzięki zoptymalizowanej bazie kodu i możliwości trzęsienia drzew, Vue 3 ma mniejszy rozmiar pakietu w porównaniu do Vue 2. Zmniejszenie rozmiaru przekłada się na szybsze ładowanie i lepszą wydajność.

3. Usprawniona organizacja kodu

Wykorzystując Composition API, kod komponentu można zorganizować w mniejsze, łatwe do ponownego użycia funkcje. Sprzyja to lepszemu zrozumieniu i utrzymaniu, szczególnie w przypadku dużych i złożonych komponentów.

4. Możliwość ponownego wykorzystania komponentów i funkcji

Funkcje kompozycji można łatwo ponownie wykorzystywać w różnych komponentach, co ułatwia współdzielenie kodu i tworzenie biblioteki funkcji wielokrotnego użytku.

5. Lepsza obsługa TypeScript

Composition API zapewnia bardziej wszechstronne wsparcie dla TypeScript, umożliwiając dokładniejsze wnioskowanie o typach i łatwiejsze wykrywanie błędów związanych z typami podczas programowania.

Porównanie obiektu Options i Composition API

Teraz, gdy poznaliśmy teorię Composition API, możemy przejść do praktycznego zastosowania. Aby zrozumieć korzyści Composition API, porównajmy kluczowe aspekty obu podejść.

Dane reaktywne w Vue 3

Dane reaktywne to fundamentalna koncepcja w Vue, która sprawia, że zmiany w danych automatycznie aktualizują interfejs użytkownika aplikacji.

W Vue 2 system reaktywności był oparty na metodzie Object.defineProperty i opierał się na obiekcie danych, który zawierał wszystkie właściwości reaktywne.

Kiedy definiowano właściwość danych za pomocą opcji danych w komponencie Vue, Vue automatycznie opakowywał każdą właściwość w obiekcie danych przy użyciu modułów pobierających i ustawiających, co jest nową funkcją skryptu ECMA (ES6).

Te moduły śledziły zależności między właściwościami i aktualizowały interfejs po modyfikacji dowolnej z nich.

Oto przykład tworzenia danych reaktywnych w Vue 2 za pomocą obiektu Options:

 <template>
  <div>
    <p>Licznik: {{ count }}</p>
    <button @click="increment">Zwiększ</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>
 

Ten fragment kodu pokazuje, jak tworzyć zmienne w Vue 2. Vue automatycznie sprawia, że zmienne zdefiniowane w obiekcie danych stają się reaktywne. Zmiany we właściwości danych (liczba) powodują aktualizację interfejsu użytkownika.

Dodatkowo, obiekt metod służył do definiowania funkcji JavaScript używanych w komponencie. W tym przykładzie definiowana jest metoda inkrementacji, która zwiększa wartość zmiennej licznik o 1.

Podczas definiowania funkcji jako metod w Vue 2 konieczne było użycie słowa kluczowego `this` (this.count++). Słowo `this` pozwalało odwołać się do zmiennych w obiekcie danych. Pominięcie słowa kluczowego `this` skutkowałoby błędem podczas tworzenia komponentu przez Vue.

System reaktywności oparty na proxy w Vue 3 używa proxy JavaScript do osiągnięcia reaktywności, co zapewnia znaczny wzrost wydajności i lepszą obsługę zależności reaktywnych.

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>Licznik: {{ count }}</p>
    <button @click="increment">Zwiększ</button>
  </div>
</template>
 

Aby użyć funkcji `ref()` w Vue 3, najpierw trzeba ją zaimportować z pakietu `vue`. Funkcja `ref()` tworzy reaktywne odwołania do zmiennych.

Przykładowy fragment 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`. Właściwość `value` przechowuje aktualną wartość licznika.

Dyrektywa `@click` służy do obsługi zdarzeń kliknięcia w Vue.

Funkcje potrzebne w komponencie definiuje się w bloku konfiguracji skryptu. Vue 3 zastąpiło składnię metod do definiowania funkcji w Vue 2 zwykłymi funkcjami JavaScript.

Można teraz uzyskać dostęp do zmiennych reaktywnych zdefiniowanych za pomocą funkcji `ref()`, dodając `.value` do nazwy zmiennej. Na przykład blok kodu używa `count.value` w celu odniesienia się do wartości zmiennej `count`.

Funkcja `computed` w Vue 3

Funkcja `computed` to kolejne narzędzie Vue, które pozwala na definiowanie wartości pochodnych na podstawie danych reaktywnych. Właściwości obliczane są automatycznie aktualizowane za każdym razem, gdy zmieniają się ich zależności, zapewniając, że wynikowa wartość jest zawsze aktualna.

W Vue 2 obliczone zachowanie definiowano za pomocą opcji `computed` w komponencie. Oto przykład:

 <template>
  <div>
    <p>Licznik: {{ count }}</p>
    <p>Podwojony licznik: {{ doubleCount }}</p>
    <button @click="incrementCount">Zwiększ licznik</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 właściwość obliczona `doubleCount` zależy od właściwości danych `count`. Za każdym razem, gdy zmienia się właściwość `count`, Vue ponownie oblicza wartość `doubleCount`.

W wersji 3 Composition API wprowadza nowy sposób definiowania obliczonych właściwości za pomocą funkcji `computed`. 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>Licznik: {{ count }}</p>
    <p>Podwojony licznik: {{ doubleCount }}</p>
    <button @click="incrementCount">Zwiększ licznik</button>
  </div>
</template>
 

Aby móc korzystać z tej funkcji, należy zaimportować funkcję `computed` z pakietu `vue`.

W powyższym fragmencie kodu zdefiniowano obliczone odwołanie `doubleCount` za pomocą funkcji `computed`. W Vue 3 obliczone właściwości są traktowane jako obliczone odwołania, co podkreśla ich zależność od zmiennych reaktywnych.

Funkcja `computed` przyjmuje jako argument funkcję pobierającą, która oblicza wartość pochodną na podstawie danych reaktywnych. W tym przypadku obliczone odwołanie `doubleCount` zwraca wynik pomnożenia zmiennej reaktywnej `count` przez 2.

Należy zauważyć, że bloki kodu oparte na Composition API są bardziej przejrzyste i zwięzłe niż te zapisane przy użyciu obiektu Options.

Nauka tworzenia niestandardowych dyrektyw w Vue

Composition API w Vue 3 oferuje efektywne i elastyczne podejście do organizowania i ponownego wykorzystywania kodu w komponentach Vue. Dzięki Composition API można tworzyć bardziej modułowe i łatwe w utrzymaniu aplikacje Vue.

Vue oferuje również dodatkowe funkcje, które zwiększają produktywność podczas tworzenia aplikacji internetowych. Możesz nauczyć się tworzyć niestandardowe dyrektywy, aby móc ponownie wykorzystywać konkretne funkcje w różnych częściach aplikacji Vue.