Po dwóch latach oczekiwania, Vue.js 3.0 w końcu dostępny
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.
