Piątkowe popołudnie rozpoczęło się oficjalnym wydaniem stabilnej wersji Vue.js 3.0 „One Piece”. Lepsza wydajność, mniejsze rozmiary pakietów i nowe interfejsy API do obsługi przypadków użycia na większą skalę to tylko część nowości w wydaniu.

Nowe interfejsy API w Vue.js 3.0

Interfejs 2.x jest oparty na obiektach. W nowym wydaniu jest on w dużej mierze nienaruszony. Jednak twórcy dodali do niego Composition API. Jest to nowy zestaw interfejsów API, rozwiązujący problemy z korzystaniem z Vue w aplikacjach na dużą skalę. Zbudowany jest na reaktywnym interfejsie i pozwala na składanie logiki i jej ponowne użycie, tak samo jak w Reactowych hookach. Ponadto organizacja kodu jest bardziej elastyczna, a wnioskowanie o typie bardziej niezawodne.

Composition API jest także dostępne dla wcześniejszej wersji Vue 2.x, przez wtyczkę @vue/composition-api.

Warstwowe moduły wewnętrzne

Z rdzenia nowego Vue dalej można korzystać przy pomocy prostego tagu <script>. Jednak jego elementy wewnętrzne przepisano od podstaw do zbioru odsprzęgniętych modułów. Dzięki temu użytkownik otrzymuje łatwiejszą konserwację. Ponadto przez tree-shaking może on zaoszczędzić nawet połowę rozmiaru środowiska wykonawczego.

Lepsza wydajność

W porównaniu z Vue 2, nowe wydanie wykazało znacznie lepszą wydajność w przeprowadzonych testach. Przykładowo, pakiet z tree-shaking jest prawie 41% lżejszy. Co ciekawe, Vue.js 3.0 wykorzystuje o 54% mniej pamięci i tak samo szybciej się renderuje. Przyjęte w nowym wydaniu podejście: „wirtualny model DOM oparty na kompilatorze” oznacza, że kompilator szablonów przeprowadza agresywną optymalizację i generuje kod funkcji renderowania, który podnosi zawartość statyczną. Pozostawia także wskazówki dotyczące typów powiązań w czasie wykonywania oraz spłaszcza dynamiczne węzły wewnątrz szablonu, zmniejszając tym samym koszt przechodzenia przez środowisko wykonawcze. W wyniku tego użytkownik otrzymuje zoptymalizowaną wydajność lub bezpośrednią kontrolę przy pomocy ręcznych funkcji renderowania (jeśli tego wymaga przypadek użycia).

Vue.js 3.0 zintegrowane z TypeScript

Jak wspominaliśmy przy publikacji pierwszego kandydata do wydania, całą bazę nowego Vue napisano w języku TypeScript. Rozszerzenie VSCode, Vetur, wykorzystuje lepsze wewnętrzne pisanie Vue. Dzięki temu Vue.js 3.0 obsługuje wyrażenia szablonów oraz sprawdzanie typów rekwizytów.

Eksperymentalne funkcje w Vue.js 3.0

Wersja 3.0 posiada dwie zaimplementowane już funkcje dla plików vue – Singe-File Components (SFC):

<script setup>: syntactic sugar for using Composition API inside SFCs
<style vars>: state-driven CSS variables inside SFCs

Podsumowanie

Dwa lata prac, 30 specyfikacji RFC, ponad 2600 zatwierdzeń i 628 pull requestów to tylko część liczb powiązanych z wydaniem wersji 3.0. Obecnie Vue posiada prawie 1,3 miliona użytkowników na całym świecie. Programiści korzystają z niego w przypadku rozpraszania interaktywności na tradycyjnych stronach, a także przy w pełni rozwiniętych jednostronicowych aplikacji z setkami komponentów.

Oficjalnie wydana wersja Vue oznacza ogólną gotowość frameworka. Twórcy zachęcają do tworzenia projektów z Vue 3.0 już teraz, mimo tego, że niektóre elementy wymagają dalszej pracy.

Więcej informacji o Vue znajduje się w nowej witrynie z dokumentacją. Dla użytkowników Vue 2.x dostępny jest także przewodnik migracji.