Po dwóch latach oczekiwania, Vue.js 3.0 w końcu dostępny

Najnowsza wersja frameworku Vue.js, czyli wydanie 3.0, zostało oficjalnie opublikowane, po prawie dwóch latach oczekiwania.

Nowa wersja Vue.js, frameworku JavaScript do budowania interfejsów użytkownika oraz Single Page Applications, została właśnie wydana. Vue 3.0 „One Piece” było ogłaszane jesienią 2018 roku na konferencji Vue.js London, czyli około dwóch lat przed oficjalną publikacją. Evan You, twórca frameworku, określił najnowsze wydanie jako szybsze, mniejsze, łatwiejsze w utrzymaniu i wykorzystaniu w aplikacjach natywnych. Wraz z nową wersją, otrzymaliśmy również lepszą integrację TypeScriptu oraz nowe API. Szczegółowy opis najważniejszych nowości znajdziecie poniżej.

Composition API

Jedną z najważniejszych zmian we frameworku JavaScriptu jest nowe API, które pozwala na pisanie komponentów w sposób oparty na funkcjach. Usprawnienie to zostało zainspirowane przez React Hooks. Nowe API umożliwia hermetyzację logiki w tzw. „composition functions” i pozwala używać jej ponownie we wszystkich komponentach.

Zmienia to trochę sposób, w jaki będziemy korzystać z Vue.js. Osoby używające Vue w wersji 2.x mogą użyć tego pluginu, aby wykorzystać nowe podejście w swoich aplikacjach.

Lepsza wydajność

Vue 3.0 jest o wiele bardziej wydajne w porównaniu do swojej poprzedniej wersji. Mówimy tutaj o rozmiarze gotowej aplikacji Vue, która jest do 41% lżejsza dzięki użyciu techniki tree-shaking, początkowym renderowaniu, które jest do 55% szybsze, aktualizacjach, które są aż o 133% szybsze oraz o 54% mniejszym zużyciu pamięci.

Funkcje eksperymentalne

Twórcy Vue.js zaproponowali w nowym wydaniu dwie funkcje dla Single-File Components (znane również jako SFC lub pliki .vue). Są to:

<script setup>dla korzystania z Composition API w SFC
<style vars>, czyli zmienne CSS oparte na stanie wewnątrz SFC.

Funkcje te zostały zaimplementowane w 3.0 i można z nich normalnie korzystać, z tym że ich obecność w nowej wersji frameworku ma służyć jedynie zbieraniu feedbacku. Pozostaną one funkcjami eksperymentalnymi, dopóki RFC nie zostanie scalone.

Warstwowe moduły wewnętrzne

Vue 3.0 nadal może zostać użyte przy pomocy prostego tagu <script>, ale jego moduły wewnętrzne zostały przepisane jako kolekcja oddzielnych modułów. Eksponują one również niskopoziomowe API, które zapewnią większą elastyczność w razie konieczności stworzenia czegoś niestandardowego.

Mamy na przykład fakt, że kompilator będzie obsługiwał niestandardowe przekształcenia AST, które będzie można zastosować w czasie kompilacji oraz to, że moduł @vue/reactivity eksportuje funkcje, które zapewniają bezpośredni dostęp do systemu reaktywnego Vue.

Inne

Vetur, czyli oficjalne rozszerzenie Vue w VSCode, obsługuje teraz wyrażenia szablonowe. Co więcej, Vue 3.0 w pełni obsługuje teraz też TSX.

Jeżeli chodzi o jeszcze inne zmiany, to twórcy zaimplementowali nieudokumentowany komponent <Suspense>, który pozwala oczekiwać na zagnieżdżone zależności asynchroniczne podczas początkowego renderowania. Vue 3.0 zapewnia również lepszą integrację z językiem TypeScript.

Co dalej?

Twórcy Vue utrzymują, że po wydaniu 3.0 zamierzają skupić się na następujących rzeczach: stworzeniu tzw. migration build, czyli v3, ale z zachowaniem kompatybilnym z v2 z dodatkiem ostrzeżeń o tym, co przestanie być kompatybilne, obsłudze IE11, integracji Router i Vuex w nowych narzędziach developerskich oraz na dalszych ulepszeniach.