Od biblioteki javascript do frameworka, podróż Vue jest imponująca, zwłaszcza jeśli weźmiesz pod uwagę, jak nadal utrzymuje swoją lekką naturę. Istnieje kilka funkcji, które oferuje Vue3, w tym Pinia, która umożliwia łatwiejsze zarządzanie stanem, a także build toolchain, który działa na Vite. Niezależnie od tego, czy chcesz zaktualizować swoje aplikacje do Vue3, czy po prostu chcesz eksperymentować z frameworkiem, zebraliśmy tutaj wszystko, co musisz wiedzieć o Vue3!
Czym jest Vue3?
Zanim przejdziemy do zmian, które zobaczysz w Vue3, przyjrzyjmy się najpierw, czym jest Vue.js i jego podstawowe komponenty:
Vue
Vue.js to open-source'owy front-endowy framework JavaScript, który może być używany do tworzenia interfejsów użytkownika. Framework oferuje deklaratywne i oparte na komponentach podejście do kodowania, które pomaga w szybkim rozwoju wyświetlaczy użytkownika. Może być używany do tworzenia podstawowych lub skomplikowanych interfejsów i jest zbudowany na szczycie branżowego standardu HTML, CSS i JavaScript. Powodem popularności i dużej bazy użytkowników Vue.js jest jego przyjazna dla programistów składnia, łatwość użycia i dobrze zdefiniowana dokumentacja.
Jak wspomniano powyżej, Vue.js jest zbudowany na dwóch podstawowych cechach:
Deklaratywne renderowanie umożliwia użytkownikowideklaratywne definiowanie wyjścia HTML w zależności od stanu JavaScript. Vue.js rozszerza normalny HTML za pomocą składni szablonów.
Reaktywność - Vue.js aktywnie monitoruje stan JavaScript, a gdy zostanie on zmodyfikowany, szybko odświeża DOM.
Vue3.0
Inżynierowie, którzy używają Vue 2 do kodowania, muszą teraz zaktualizować się do Vue3. Posiada on bowiem nowe możliwości, dzięki którym projektowanie czytelnych, spójnych komponentów jest znacznie łatwiejsze, a także lepsze metody organizacji naszych aplikacji. Vue3 jest bardziej przyjazny dla użytkownika, krótszy i prostszy w utrzymaniu. Niektóre z godnych uwagi funkcji Vue3 to Teleport, Fragments, oraz wiele v-modeli.
Najnowsza wersja pozbyła się również filtrów i ma zmienne CSS sterowane stanem, a także eksperymentalną funkcję zawieszenia. Posiada również modyfikacje nazewnictwa w cyklu życia i zmiany komponentów w pojedynczych plikach.
Czy Vue3 zostało już wydane?
Najnowsza dostępna wersja Vue - Vue3, została wstępnie ogłoszona w połowie 2018 roku i oficjalnie wydana we wrześniu 2020 roku. Vue3.0 został ogłoszony jako oficjalna domyślna wersja progresywnego frameworka javascript 7 lutego 2022 roku.
Co jest nowego w Vue3?
Najbardziej ekscytujące zmiany, których należy się spodziewać w Vue3 to:
Provide/inject
Vue 2 pozwoliło użytkownikom przekazać dane takie jak ciągi, tablice, obiekty i więcej poprzez rekwizyty w kodzie. Takie dane mogły być łatwo przekazywane z elementu nadrzędnego do jego elementów dziecięcych. Jednak użycie rekwizytów sprawiło, że przesłanie danych z elementu nadrzędnego do głęboko zagnieżdżonego elementu potomnego było trudniejsze. W efekcie programiści musieli korzystać z Vuex Store i Event Hub. Vue 2.2.0 zawierało również provide/inject, ale nie zalecano używania go w ogólnym kodzie programu.
Jednak dzięki użyciu ulepszonego kompa provide/inject w Vue3, możemy przekazywać dane szybciej i zgrabniej. Jak sama nazwa wskazuje, wykorzystujemy provide do udostępniania danych z elementu nadrzędnego do dowolnego z jego elementów potomnych, niezależnie od tego, jak głęboko zagnieżdżone są te elementy potomne. Możemy tutaj używać provide jako obiektów lub jako funkcji.
Teleport
W oparciu o logikę aplikacji, którą chcesz zbudować, twoje komponenty mogą być wyświetlane w miejscach, które różnią się od tych, w których chcesz je wyświetlać. Na przykład, możesz chcieć stworzyć popup, który ma się pojawić i zająć cały ekran. Aby to przezwyciężyć, możemy użyć atrybutu position takich komponentów w CSS, ale w Vue3 programiści mogą również użyć Teleportu.
Teleport pozwala programistom zabrać element z jego początkowego kontenera, w który jest zawinięty i przenieść je do dowolnego, już istniejącego na stronie komponentu, w którym są używane. Na przykład, możesz przenieść element nagłówka z div #app do nagłówka. Pamiętaj, że możesz używać Teleportu tylko do przenoszenia elementów do komponentów kodu, które istnieją poza Vue DOM.
Fragmenty
W Vue 2 trudno jest mieć kilka komponentów root w szablonie pliku. Programiści zaczęli zamykać wszystkie komponenty w komponencie nadrzędnym jako rozwiązanie dla tego samego. Czasami programiści mogą potrzebować renderować element bez kontenera owiniętego wokół niego.Inżynierowie mogą teraz mieć wiele elementów w swoim pliku szablonu root dzięki Fragments, który jest funkcją dodaną do Vue3.
Globalne API Vue
Mogłeś często znaleźć Vue.component lub Vue.use w pliku main.js aplikacji Vue. Są one określane jako globalne API, a w Vue 2 jest wiele takich metod. Tutaj, jeśli masz wiele instancji swojej aplikacji, wszystkie są umieszczone na szczycie Vue. Trudno jest ograniczyć określoną funkcjonalność do pojedynczej instancji aplikacji.
Vue3 rozwiązuje ten problem, wprowadzając nowy globalny interfejs API o nazwie createApp. Dzięki tej metodzie możesz uzyskać świeżą instancję aplikacji Vue. Wszystkie API związane z Vue 2.x zostaną przeniesione do oddzielnych instancji aplikacji. Dzięki temu każda instancja twojej aplikacji może mieć funkcje, które są dla niej wyłączne, bez zakłócania innych instancji, które są już w użyciu.
API zdarzeń
Oprócz korzystania z Vuex Store, użycie szyny zdarzeń jest jedną z najbardziej popularnych metod, które programiści wykorzystali do przekazywania danych między elementami, które nie mają wspólnego kontekstu rodzic-dziecko. Jednak kody takie jak $on, $off i $once zostały usunięte w Vue3. Ale $emit jest nadal dostępny, ponieważ elementy dziecięce muszą emitować zdarzenia do swoich elementów nadrzędnych. Rozwiązaniem tego problemu byłoby użycie provide/inject.
Narzędzie do budowania napędzane przez Vite
Zaprojektowany przez Evana You, twórcę Vue, Vite to najwyższej klasy toolchain wspierający Vue SFC, który jest lekki i szybki w tworzeniu. Vite jest teraz silnikiem stojącym za standardową konfiguracją kompilacji Vue3. Moduł bundler @vue-cli/service, który jest zbudowany na szczycie webpacka, będzie owijał całą twoją aplikację Vue podczas uruchamiania, gorących przeładowań i kompilacji. Vite, z drugiej strony, pobierze składnię ES Import z twojego kodu programu i pozwoli przeglądarce przeanalizować każdy import przed wysłaniem żądania HTTP.
Zmiana ta jest wprowadzana przede wszystkim ze względu na szybkość działania. Serwer uruchamia się natychmiast, ponieważ wykorzystuje natywną obsługę przeglądarki dla komponentów JavaScript i jest znacznie szybszy.
Składnia interfejsu API kompozycji
Options API służyło do tworzenia stanów i logiki elementów. Composition API zostało uruchomione przez Vue3 jako substytut tego samego. Jest to jedynie zbiór API, który umożliwia nam tworzenie elementów Vue bez definiowania opcji za pomocą importowanych metod.
Composition API zawiera następujące API:
API reaktywności - Na przykład ref() i reactive(). Może bezpośrednio budować stan reaktywny, stan obliczony i obserwatorów za pomocą tego.
Haki cyklu życia - Na przykład onMounted() i onUnmounted(). Możemy zahaczyć o cykl życia elementu używając haków cyklu życia.
Wstrzykiwanie zależności - Na przykład provide() i inject(). Wykorzystanie systemu wstrzykiwania zależności Vue z API Reactivity jest możliwe dzięki wstrzykiwaniu zależności.
Zalety używania interfejsów API kompozycji
Główne zalety korzystania z Composition APIs w stosunku do Options API to:
- Element nie jest już konieczny w przypadku Vue3 do wygenerowania stanu reaktywnego.
- Podczas dodawania licznych atrybutów reaktywnych, konfiguracja w elementach Vue.js może stać się rozdęta. Może być przydatne, aby te zmienne reaktywne abstrahowały w oddzielnych plikach javascript z tego powodu.
- Główną zaletą interfejsu API Composition jest to, że umożliwia ponowne wykorzystanie czystej, efektywnej logiki w kształcie metod Composable. Rozwiązuje wszystkie problemy z mixinami, główną metodą ponownego wykorzystania logiki w API opcji.
- Możesz wpisywać kod w Composition API z pełnym wnioskowaniem typów.
- Programy, które piszesz w Composition API, są bardziej wydajne, a nazwy zmiennych mogą być mniejsze. Zmniejsza to koszty ogólne.
- Możesz lepiej udostępniać kod swojego programu dzięki Composition API.
Pinia
Pinia to lekkie narzędzie do zarządzania stanami dla Vue.js. Umożliwia nam współdzielenie stanu pomiędzy elementami i stronami. Tworzy przyjazny dla użytkownika, całkowicie typowany framework zarządzania stanem, wykorzystując nową koncepcję reaktywności w Vue3. Jest to obecnie nowa standardowa biblioteka kontroli stanu w Vue3.
Pinia początkowo służyła jako badanie potencjału Vuexa. Przez długi czas Vuex był sugerowanym systemem zarządzania stanami dla Vue, ale z Vue3, Pinia jest zalecanym systemem zarządzania stanami w oficjalnej dokumentacji. Obecnie Vuex znajduje się w trybie konserwacji. Chociaż nadal działa, nie zostaną dodane żadne nowe funkcje. Używanie Pinii jest zalecane dla świeżych aplikacji.
Dlaczego Pinia?
Pinia jest bardzo lekka, zajmuje zaledwie 1KB. Dodatkowo integruje się z narzędziami Vue.js, aby poprawić Twoje doświadczenie w kodowaniu w Vue 2 i Vue3. Ponieważ Pinia infekuje wszystkie twoje typy danych, może zaoferować ci pełne i precyzyjne autouzupełnianie w javascript, jak również. Pinia jest również modułowa przez projekt, przyjazna dla użytkownika i rozszerzalna. Ogólnie rzecz biorąc, Pinia wydaje się być lekka, nieskomplikowana i prosta. Ściśle przypomina radzenie sobie z elementami i zawiera wszystkie narzędzia niezbędne do dynamicznego programowania w Vue3.
Czy Vue 2 zostanie zdeprecjonowane?
Ostatnią drobną aktualizacją dla Vue 2 było Vue 2.7, które zostało wydane w lipcu 2022 roku. Vue 2 jest obecnie w trybie konserwacji. Podczas gdy żadne dodatkowe funkcje nie zostaną wysłane, nadal będzie otrzymywać kluczowe poprawki błędów i łatki bezpieczeństwa przez 18 miesięcy. Do końca 2023 roku Vue 2 zostanie zdeprecjonowane.
Migracja z Vue 2
W oparciu o twoje oprogramowanie, przejście na Vue3 może nie być opłacalne, jeśli pracujesz nad wyjątkowo dużym projektem przy użyciu Vue 2. Użyj Vue3, jeśli problemy z wydajnością utrzymują się pomimo twoich najlepszych wysiłków w zakresie optymalizacji.
To, czy chcesz zmigrować swoją aplikację do Vue3, zależy od jej rozmiaru i złożoności. Większość składni i technik w Vue 2 jest taka sama jak w Vue3. Jeśli jednak chcesz wykorzystać niektóre z wymienionych zmian, to migracja będzie lepszym pomysłem.
Vue.js w projekcie AppMaster
Platforma AppMaster wykorzystuje framework VueJS, a raczej jego trzecią wersję, do tworzenia aplikacji front-end dla naszych użytkowników. Vue 3 służy do tworzenia adminów, paneli i portali klienckich, a cały interfejs studia AppMaster jest tak naprawdę wykonany również przy użyciu frameworka VueJS.
Używamy specjalnego podejścia zwanego mikro-frontendami lub mikroserwisami frontendowymi, aby móc szybko i efektywnie rozwijać nasz produkt; na przykład każdy edytor modelu danych i edytor procesów biznesowych jest całkowicie oddzielną aplikacją frontendową w naszej platformie. Pozwala to na bardzo szybki i niezależny rozwój z punktu widzenia zespołu programistów, co zwiększa ogólną szybkość naszego produktu. Wszystkie te zalety nasi klienci mogą uzyskać korzystając z naszych aplikacji.
W przyszłości, oprócz trybu aplikacji single-page SPA, dodamy tryb SSR (server-side rendering), który pozwoli naszym klientom tworzyć nie tylko panele administracyjne i niestandardowe portale, ale także w pełni funkcjonalne strony internetowe z bardzo wysoką optymalizacją SEO.
O no-code
Jednym z kluczowych elementów wpływających na demokratyzację kodowania jest podejście no-code development. W dzisiejszych czasach większa liczba osób ma dostęp do programowania w ogóle z pominięciem kodowania. Dzięki temu projektowanie stron internetowych, tworzenie aplikacji mobilnych i responsywnych stron internetowych jest prostsze.
AppMaster jest wśród aplikacji, które mogą być używane do automatycznego tworzenia kodu źródłowego. Możesz przeglądać i sprawdzać kod w dowolnym momencie. Dzięki AppMaster masz możliwość dostosowania informacji o projekcie za pomocą języka komputerowego. Pozwalamy również ludziom eksportować kod, jeśli chcą. Jest to gwarancja, że masz pełną kontrolę i własność nad aplikacją, nad którą pracujesz z AppMaster.
Wnioski
Jeśli chcesz uzyskać bardziej szczegółowe wyjaśnienie, jak Vue3 różni się od Vue 2, wraz z fragmentami kodu, możesz przejść przez oficjalną dokumentację Vue.js. Wymieniliśmy większość głównych zmian, o których powinieneś wiedzieć. Ważne jest, abyś był świadomy aktualizacji Vue3, jeśli jesteś zainteresowany budowaniem aplikacji z tym frameworkiem.
