Vue.js kontynuuje swoją ewolucję, a najnowsza wersja 3.5 wprowadza wiele przydatnych usprawnień i nowych funkcji. W tym artykule przyjrzymy się najciekawszym nowościom, które znacząco wpływają na komfort pracy programistów i wydajność aplikacji.
Reaktywna destrukturyzacja propsów
Jedną z najbardziej wyczekiwanych funkcji w Vue 3.5 jest stabilizacja reaktywnej destrukturyzacji propsów. Ta funkcjonalność, wcześniej dostępna jako eksperymentalna, jest teraz włączona domyślnie.
Dzięki temu kod staje się bardziej przejrzysty i bliższy standardowym wzorcom JavaScript, bez konieczności stosowania specjalnych workaroundów dla zachowania reaktywności.
Ulepszony system reaktywności
Vue 3.5 wprowadza gruntownie przepracowany system reaktywności, który przynosi imponujące korzyści:
- Zużycie pamięci mniejsze o 56%
- Znacznie szybsze przetwarzanie dużych, głęboko zagnieżdżonych tablic (w niektórych przypadkach nawet 10 razy szybsze)
- Rozwiązane problemy z nieaktualnymi wartościami computed i wyciekami pamięci
To usprawnienie jest szczególnie odczuwalne w dużych aplikacjach operujących na złożonych strukturach danych.
Nowe API dla referencji do elementów DOM
Vue 3.5 wprowadza nowe API , które upraszcza pracę z referencjami do elementów DOM:
To rozwiązanie jest nie tylko bardziej czytelne, ale także lepiej sprawdza się w komponentach wielokrotnego użytku (composables).
Usprawnienia dla Web Components
Vue 3.5 wprowadza istotne ulepszenia dla komponentów niestandardowych (Web Components):
- Nowa opcja pozwalająca na konfigurację aplikacji Vue dla elementów niestandardowych
- API i ułatwiające dostęp do elementu hosta i shadow DOM
- Możliwość tworzenia komponentów niestandardowych bez Shadow DOM dzięki opcji
- Wsparcie dla atrybutu w stylach wstrzykiwanych przez komponenty niestandardowe
Te zmiany znacząco ułatwiają tworzenie i dostosowywanie komponentów Web Components przy użyciu Vue.
Lepsze SSR (Server-Side Rendering)
Vue 3.5 oferuje również istotne usprawnienia w obszarze renderowania po stronie serwera:
Dodatkowo wprowadzono:
- Atrybut pozwalający na ignorowanie ostrzeżeń o niezgodności między renderowaniem serwerowym a klienckim
- API do generowania identyfikatorów stabilnych między serwerem a klientem
Rozszerzone możliwości obserwatorów
Obserwatory (watchers) w Vue 3.5 zyskały nowe przydatne funkcje:
- Możliwość określenia głębokości obserwacji za pomocą liczby w opcji
- Metody i do wstrzymywania i wznawiania obserwatorów
- API do rejestrowania funkcji czyszczących
Inne przydatne usprawnienia
Vue 3.5 wprowadza również szereg innych udogodnień:
- Możliwość zagnieżdżania komponentu wewnątrz , co pozwala na animowanie teleportowanych elementów
- Nowa opcja dla komponentu , umożliwiająca opóźnione montowanie zawartości
- Ulepszenia w typowaniu dyrektyw, z możliwością określenia dozwolonych modyfikatorów
Warto podkreślić, że Vue 3.5 jest aktualizacją kompatybilną wstecznie, która nie wprowadza zmian łamiących. Dzięki temu można bezpiecznie aktualizować istniejące aplikacje i korzystać z nowych funkcji bez obaw o powstanie nieoczekiwanych problemów.
