Migracja do Vue 3 Composition API w celu lepszego tworzenia komponentów

Ponieważ twórcy Vue ogłosili, że Vue 2 osiągnie koniec życia do 31 grudnia 2023 roku, deweloperzy są zachęcani do przejścia na Vue 3.

Wprowadzenie tej ewolucji przynosi Composite Application Platform Interface, który przedstawia bardziej usprawnioną, jawną i bezpieczną dla typu metodę konstruowania projektów Vue poprzez modułowe i deklaratywne zasady projektowania.

Czym jest interfejs API kompozycji?

Pojawienie się Composition API oznacza znaczące odejście od konwencjonalnej metodologii stosowanej przy tworzeniu komponentów Vue przy użyciu obiektu Options. Przyjęcie tej progresywnej techniki jest zgodne z coraz bardziej asertywnym i deklaratywnym sposobem myślenia, który kładzie nacisk na skupienie się na konstruowaniu aplikacji Vue bez obciążania jej zawiłymi szczegółami implementacji.

Motywacja dla Composition API

Twórcy Vue zidentyfikowali trudności związane z wykorzystaniem obiektu Options w konstruowaniu skomplikowanych aplikacji internetowych wraz ze wzrostem rozmiarów projektu. W szczególności zarządzanie logiką komponentu stało się mniej wykonalne na dużą skalę i trudniejsze do utrzymania w ustawieniach współpracy.

Konwencjonalna implementacja obiektu Options często prowadziła do obfitości atrybutów komponentów, sprawiając, że kod był trudny do zrozumienia i zarządzania ze względu na jego złożoność.

Dodatkowo, wykorzystanie współdzielonej logiki pomiędzy różnymi komponentami okazało się nieporęczne. Co więcej, rozproszona logika rozproszona w wielu hakach i metodach cyklu życia dodatkowo utrudniała zrozumienie nadrzędnego zachowania poszczególnych komponentów.

Zalety Composition API

Wykorzystanie Composition API przynosi wiele korzyści w porównaniu do Options API, zwiększając ogólną funkcjonalność i komfort użytkowania.

Lepsza wydajność

Vue 3 wprowadziło innowacyjne podejście do renderowania znane jako system reaktywności oparty na proxy, który został zaprojektowany w celu zwiększenia zarówno wydajności, jak i możliwości reaktywnych. Minimalizując zużycie pamięci i optymalizując reaktywność, ten nowy system pozwala na lepszą obsługę rozległych hierarchii komponentów z większą wydajnością.

Mniejszy rozmiar pakietu

Ze względu na usprawnioną architekturę i wydajną alokację zasobów zapewnianą przez zoptymalizowaną bazę kodu Vue 3 i możliwości potrząsania drzewem, może pochwalić się bardziej kompaktowym pakietem w porównaniu do swojego poprzednika, co skutkuje krótszym czasem ładowania i lepszą ogólną wydajnością.

Ulepszona organizacja kodu

Wykorzystując możliwości Composition API, możliwe jest rozbicie kodu źródłowego komponentu na łatwiejsze w zarządzaniu, modułowe jednostki poprzez implementację mniejszych funkcji wielokrotnego użytku. Takie podejście nie tylko poprawia zrozumienie i ułatwia bieżące utrzymanie, ale także służy jako cenna strategia w radzeniu sobie z wyzwaniami stawianymi przez skomplikowane i rozbudowane komponenty.

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

Wykorzystanie funkcji kompozycji pozwala na płynną integrację i ponowne wykorzystanie kodu w różnych komponentach, co skutkuje wydajną biblioteką współdzielonych funkcjonalności.

Lepsza obsługa języka TypeScript

Wprowadzenie interfejsu API kompozycji znacznie poprawiło poziom obsługi języka TypeScript w Visual Studio Code, co skutkuje zwiększonym stopniem dokładności w odniesieniu do wnioskowania o typie, a także zwiększoną zdolnością do wykrywania i rozwiązywania rozbieżności typograficznych podczas procesu programowania.

Porównanie Options Object i Composition API

Znając teoretyczne podstawy React Composition API, jesteś teraz przygotowany do zastosowania tej wiedzy w praktyce. Porównanie korzyści oferowanych przez Composition API z tymi zapewnianymi przez komponenty klasowe pomoże naświetlić jego propozycję wartości.

Reaktywne dane w Vue 3

Reaktywne dane odnoszą się do kluczowej zasady Vue, która umożliwia płynne interakcje między modyfikacjami danych i odpowiadającymi im aktualizacjami interfejsu użytkownika bez konieczności wykonywania jawnych działań lub przeładowywania stron. Ta automatyczna synchronizacja zapewnia użytkownikom wydajne i responsywne doświadczenie.

Vue 2 wykorzystywał metodę Object.defineProperty jako podstawę swojego systemu reaktywnego, przy czym system ten był zbudowany na obiekcie danych, który obejmował wszystkie właściwości reaktywne w aplikacji.

Wykorzystanie opcji data w komponencie Vue pozwala na automatyczną implementację zgodnych z ES6 metod pobierających i ustawiających wokół każdej właściwości zawartej w obiekcie data .

Wspomniane metody pobierające i ustawiające monitorowały współzależności między atrybutami i dynamicznie dostosowywały interfejs użytkownika w odpowiedzi na modyfikacje dokonane w którymkolwiek z tych atrybutów.

W bardziej wyrafinowany sposób, oto ilustracja demonstrująca generowanie responsywnych danych w Vue 2 przy użyciu 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>

W tym przykładzie ilustrujemy proces tworzenia zmiennych mutowalnych w kontekście Vue.js. Gdy tylko zmienna zostanie zdefiniowana wewnątrz obiektu data , staje się ona z natury podatna na zmiany i aktualizacje, co w konsekwencji prowadzi do modyfikacji interfejsu użytkownika powiązanej aplikacji.

Ponadto wykorzystałeś obiekt methods do implementacji funkcji JavaScript, które są używane w komponencie. W tym przypadku blok kodu określa funkcję increment() , która zwiększa wartość zmiennej count o jeden.

Aby wykorzystać funkcje jako metody w aplikacji Vue 2, konieczne jest użycie słowa kluczowego “this” obok wywołania funkcji i powiązanych z nią zmiennych. Wynika to z faktu, że słowo kluczowe “this” służy do odwoływania się do zmiennych obiektu danych. Brak słowa kluczowego “this” w czasie renderowania komponentu spowoduje wygenerowanie błędu przez Vue podczas procesu montażu.

W Vue 3 zaimplementowano system reaktywności oparty na proxy, który wykorzystuje moc proxy JavaScript w celu zwiększenia jego funkcjonalności. To nowe podejście zapewnia znaczące korzyści w zakresie wydajności, a także lepsze zarządzanie zależnościami reaktywnymi, co skutkuje ogólnie bardziej wydajnym doświadczeniem programistycznym.

Vue udostępnia dwa typy funkcji do definiowania danych reaktywnych - funkcję ref i funkcję reactive . Pierwsza z nich ustanawia pojedyncze reaktywne odniesienie do konkretnej wartości, podczas gdy druga konstruuje całą reaktywną strukturę zawierającą wiele właściwości.

W tym przykładzie zilustrujemy proces generowania responsywnych danych przy użyciu funkcji ref w kontekście 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 kontekście Vue 3, należy najpierw zaimportować ją z pakietu Vue. Funkcja ta służy do tworzenia reaktywnych odniesień do różnych zmiennych.

Podany kod JavaScript wykorzystuje funkcję ref() do utworzenia odwołania do zmiennej count , ustawiając jej wartość początkową na “0”. Następnie przypisuje zwrócony obiekt z funkcji ref() do zmiennej count .Wspomniany obiekt zawiera pojedynczą właściwość o nazwie value , która służy jako zmienny magazyn dla bieżącego stanu zmiennej count .

Dyrektywa @click jest stosowana we frameworku Vue do zarządzania i reagowania na zdarzenia kliknięcia, które występują w renderowanym interfejsie komponentu. Ten mechanizm wiązania zdarzeń pozwala na niestandardową obsługę interakcji użytkownika, umożliwiając programistom włączenie dynamicznej funkcjonalności lub wyzwalanie określonych działań po wykryciu zdarzenia kliknięcia.

W Vue 3 składnia metod definiowania funkcji w komponentach została zastąpiona przez wykorzystanie standardowych funkcji JavaScript. Funkcje te są zdefiniowane w bloku setup skryptu komponentu.

Można teraz wykorzystać właściwości reaktywne ustanowione poprzez zastosowanie funkcji ref() poprzez skojarzenie metody zwracającej wartość z wyznaczonym identyfikatorem. Jako ilustracja, podany przykład kodu wykorzystuje składnię “count.value” w celu nawiązania do bieżącego stanu właściwości reaktywnej “count”.

Funkcja Computed w Vue 3

Funkcja Computed służy jako cenne narzędzie w arsenale Vue, umożliwiając tworzenie obliczonych wartości, które pochodzą z danych reaktywnych. Ten automatyczny proces aktualizacji odbywa się za każdym razem, gdy zmienia się jakakolwiek zależność, gwarantując w ten sposób, że wynikowe obliczenia pozostają aktualne i dokładne przez cały czas.

W Vue 2 można zdefiniować obliczone zachowanie komponentu, korzystając z opcji “computed” znajdującej się w tym komponencie. Przykładowa ilustracja znajduje się poniżej:

 <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>

Na powyższej ilustracji właściwość obliczana doubleCount jest zależna od właściwości danych count . Jeśli właściwość count ulegnie jakimkolwiek zmianom, Vue odpowiednio ponownie oceni właściwość doubleCount .

W Vue 3, wprowadzenie Composition API przedstawia nowatorskie podejście do definiowania obliczanych właściwości poprzez wykorzystanie obliczanej funkcji . Składnia tej implementacji jest następująca:

 <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>

W celu wykorzystania funkcji obliczanej pochodzącej z pakietu Vue, konieczne jest, aby najpierw zaimportować tę funkcję do swojej bazy kodu.

W przedstawionym fragmencie kodu utworzyliśmy właściwość obliczaną o nazwie “doubleCount” wykorzystującą funkcję obliczalną. Ta nomenklatura podkreśla zależność obliczanych właściwości od reaktywnych źródeł danych, co jest istotną cechą frameworka Vue 3.

Dostarczona implementacja definiuje funkcję obliczeniową, która akceptuje funkcję pobierającą jako dane wejściowe, przy czym ta ostatnia jest odpowiedzialna za wyprowadzenie wartości z danych reaktywnych. W szczególności, w tym przypadku doubleCount obliczone odbicie zwraca iloczyn zmiennej reaktywnej count pomnożonej przez dwa.

Warto zauważyć, że bloki kodu utworzone przy użyciu Composition API są zwykle bardziej czytelne i zwięzłe w porównaniu do ich odpowiedników skonstruowanych przy użyciu obiektu Options.

Naucz się tworzyć niestandardowe dyrektywy w Vue

Interfejs API Composition w Vue 3 oferuje solidną i wszechstronną metodę strukturyzacji i zmiany przeznaczenia kodu w szablonach komponentów, umożliwiając programistom tworzenie bardziej usprawnionych i łatwiejszych w zarządzaniu aplikacji Vue dzięki zwiększonej modułowości i łatwości konserwacji.

Vue zapewnia dodatkową funkcjonalność, która zwiększa wydajność tworzenia aplikacji internetowych. Można zdobyć wiedzę na temat opracowywania dostosowanych dyrektyw, które pozwalają na wykorzystanie określonych funkcji w różnych sekcjach projektu Vue.