Dowiedz się, jak przeprowadzić migrację z Options API do Composition API w Vue 3.

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.

Co to jest interfejs API kompozycji?

Interfejs API Composition reprezentuje zmianę paradygmatu w pisaniu komponentów Vue obiekt Opcje. 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.

instagram viewer

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 poprawy 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 typach 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 Obiekt.definicjaWłaściwość metodę i opierał 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: