Co zyskują duże aplikacje po aktualizacji do Vue 3.5?

Duże aplikacje, które przejdą na Vue 3.5, zyskają lżejszy system reaktywności, zużywający o 56% mniej pamięci i przyspieszający nawet 10-krotnie operacje na dużych reaktywnych tablicach, a także lazy hydration dla SSR, bez breaking changes.

Vue 3.5 wydano we wrześniu 2024 roku i choć oznaczono je jako wersję „minor”, jego wpływ na zespoły rozwijające duże aplikacje w Vue jest znaczący. W październiku 2026 linia 3.5 wciąż pozostaje aktualną stabilną wersją (v3.5.44).

Vue 3.6, z głębszą przebudową systemu reaktywności opartą na alien signals i Vapor Mode, wciąż jest na etapie release candidate. W tym artykule pokazujemy, co wnosi wersja 3.5 i jak uzasadnić aktualizację.

Warto już teraz przejść na Vue 3.5 czy lepiej poczekać na 3.6?

Narzut systemu reaktywności to koszt, który narasta z czasem: aplikacja Vue oparta na systemie reaktywności sprzed wersji 3.5 zużywa więcej pamięci i czasu CPU na sesję wraz ze wzrostem stanu, a ten koszt rośnie z każdym użytkownikiem i każdą nową funkcją dodawaną do rozbudowanego interfejsu.

Jeśli nic z tym nie zrobisz, najpierw zobaczysz wolniejsze interakcje na ekranach pracujących na dużej ilości danych, a później wyższe koszty infrastruktury potrzebnej do utrzymania akceptowalnych czasów odpowiedzi. Refaktoryzacja systemu reaktywności w Vue 3.5 uderza w pierwsze ogniwo tego łańcucha, co wyjaśniamy w kolejnej sekcji.

Zespoły, które zastanawiają się, kiedy wykonać migrację, mają trzy realistyczne opcje:

Vue 2 osiągnęło koniec cyklu życia 31 grudnia 2023 roku i nie otrzymuje już oficjalnych poprawek bezpieczeństwa; jedynym sposobem, by nadal łatać tę wersję, jest płatne rozszerzone wsparcie. To konkretny koszt traktowania aktualizacji do nowej głównej wersji jako czegoś opcjonalnego. Czekanie na 3.6 oznacza odkładanie znanej aktualizacji bez breaking changes w zamian za przebudowę, która jest w release candidate od lipca 2026 i nadal nie ma potwierdzonej daty premiery. Dla zespołów, które już odczuwają narzut systemu reaktywności, to zakład o premierę bez harmonogramu.

Dlaczego refaktoryzacja systemu reaktywności w Vue 3.5 obniża koszty?

System reaktywności Vue śledzi każdy fragment stanu, który twoje komponenty odczytują i zapisują. Przed wersją 3.5 narzut tego śledzenia rósł wraz z każdą właściwością w dużej tablicy reaktywnych obiektów: katalogu produktów, siatce przypominającej arkusz kalkulacyjny czy dashboardzie działającym na żywo. Większy narzut oznacza więcej pamięci przydzielanej na sesję użytkownika i więcej cykli CPU zużywanych na aktualizacje, które nie zmieniają tego, co widać na ekranie.

Według benchmarków opublikowanych przez zespół Vue, wersja 3.5 zmniejsza zużycie pamięci przez system reaktywności o 56% i przyspiesza niektóre operacje na dużych, głęboko reaktywnych tablicach nawet 10-krotnie. Mniejsze zużycie pamięci na sesję oznacza, że ekrany pracujące na dużych ilościach danych pozostają responsywne także na słabszych urządzeniach i mogą utrzymać więcej stanu, zanim karta zacznie się „dławić”. W aplikacjach SSR te oszczędności widać także po stronie serwera renderującego, gdzie pamięć renderowania jest opłacana per żądanie.

Lazy hydration dodatkowo wzmacnia ten efekt: strony z dziesiątkami komponentów przestają ponosić koszt hydratacji dla elementów, do których nikt jeszcze nie przewinął, i właśnie to poprawia time-to-interactive.

Monterail tworzy aplikacje Vue.js od 2015 roku, a w 2019 został Official Vue.js Partner. Koszty związane z reaktywnością i hydratacją SSR to dokładnie te obszary, w których klienci z fintechu, HRTechu i e-commerce najszybciej odczuwają korzyści z tej aktualizacji.

Jak Vue.js stało się frameworkiem klasy enterprise?

Vue rozwijało się bez wsparcia dużego sponsora korporacyjnego, dzięki stopniowemu wdrażaniu i dobremu doświadczeniu deweloperskiemu. Kiedy pojawiło się na rynku, często przegrywało uwagę z Reactem, wspieranym przez Facebooka, dziś Metę, oraz Angularem wspieranym przez Google. Możliwość wdrażania go do istniejących projektów krok po kroku zapewniła mu stały wzrost popularności.

Duże firmy, takie jak Xiaomi, włączyły Vue do swoich stosów technologicznych, pokazując, że ten framework radzi sobie z wyzwaniami w skali enterprise. GitLab wyjaśnił ten wybór w publicznie dostępnym wpisie inżynierskim. Dziś Vue to dojrzały, sprawdzony w praktyce framework, który konkuruje z Reactem i Angularem o te same projekty enterprise.

Co nowego w Vue 3.5?

Vue 3.5 rozwija Composition API i przebudowę systemu reaktywności, którą przyniosło Vue 3.0, ze szczególnym naciskiem na rozwój dużych aplikacji. Najważniejsze liczby to wspomniane wcześniej 56% mniejszego zużycia pamięci oraz nawet 10-krotnie szybsze operacje na tablicach. Reszta zmian obejmuje funkcje dla SSR, takie jak lazy hydration, useId() i data-allow-mismatch, oraz kilka API, które usuwają powtarzalny boilerplate.

Po stronie TypeScripta korzyści są praktyczne, a nie rewolucyjne: destrukturyzowane propsy mogą teraz przyjmować natywne domyślne wartości JavaScriptu zamiast withDefaults(), a @vue/language-tools 2.1 dodaje wsparcie edytora dla useTemplateRef(). Vue pokazuje w oficjalnym przewodniku po TypeScripcie, jakich wzorców inferencji dotyczą te zmiany.

Wszystko to trafia do frameworka bez konieczności wprowadzania zmian w istniejącym kodzie.

Jak deweloperzy przyjęli Vue 3.5?

Vue 3.5 wywołało sporą dyskusję w społeczności deweloperów. Odbiór był w dużej mierze pozytywny, szczególnie jeśli chodzi o mniejsze zużycie pamięci i szybsze operacje na tablicach.

Dojrzały framework tak po prostu zmniejsza zużycie pamięci o 56% i 10-krotnie przyspiesza śledzenie wydajności dużych tablic obiektów. 🤯

- senn_diagram, z Reddita

Deweloperzy docenili też praktyczne usprawnienia w codziennej pracy, takie jak reaktywne destrukturyzowanie propsów i nowy sposób obsługi template refs, dzięki którym kod komponentów jest krótszy i łatwiejszy do czytania.

Bardzo podoba mi się ta metoda template refs. Przyda się w wielu miejscach.

- Smashoody, z Reddita

Ta premiera nie obyła się jednak bez dyskusji. Część deweloperów zwraca uwagę, że ekosystem Vue potrzebuje czasu, by nadgonić zmiany, szczególnie w obszarze bibliotek zewnętrznych. Trwa też dyskusja o kierunku rozwoju Vue: wielu osobom odpowiada jego rosnący zakres możliwości, ale część obawia się rosnącej złożoności, zwłaszcza w kontekście Composition API.

Które funkcje Vue 3.5 mają największe znaczenie?

Najważniejsze funkcje dla dużych aplikacji dzielą się na dwie grupy: usprawnienia wydajności i SSR, które przynoszą korzyści bez zmian w kodzie, oraz dodatki do API, które upraszczają kod pisany przez zespoły każdego dnia.

Wyższa wydajność

Optymalizacje systemu reaktywności

Refaktoryzacja systemu reaktywności daje 56% mniejsze zużycie pamięci i przyspiesza operacje na dużych, głęboko reaktywnych tablicach. Naprawia też problem z nieaktualnymi wartościami computed oraz błędy pamięci spowodowane przez „zawieszone” computed podczas SSR.

Lazy hydration

Vue 3.5 wprowadza lazy hydration dla SSR: komponent asynchroniczny określa strategię za pomocą opcji hydrate. Przewodnik po lazy hydration w dokumentacji Vue opisuje cztery wbudowane strategie, hydrateOnIdle, hydrateOnVisible, hydrateOnMediaQuery i hydrateOnInteraction, a także interfejs HydrationStrategy do definiowania własnych triggerów.

API useId()

Narzędzie useId() generuje unikalne identyfikatory spójne między renderowaniem po stronie serwera i klienta, dzięki czemu zapobiega rozjazdom hydratacji. Gwarantuje, że elementy takie jak pola formularzy zachowują stabilne ID, co ma znaczenie w aplikacjach SSR.

Atrybut data-allow-mismatch

Ten nowy atrybut pozwala deweloperom wyciszać ostrzeżenia o spodziewanych rozbieżnościach między treścią renderowaną po stronie serwera i po stronie klienta, na przykład gdy data jest inaczej sformatowana na serwerze i w przeglądarce.

Rozszerzenia API

Reaktywne destrukturyzowanie propsów

Ta funkcja jest już stabilna i domyślnie włączona. Pozwala deweloperom definiować propsy z domyślnymi wartościami przy użyciu zwykłej składni destrukturyzacji w JavaScripcie. Jest jednak jeden haczyk: jeśli chcesz obserwować destrukturyzowany prop albo przekazać go do composable, musisz opakować go w getter, () => count.

API useTemplateRef()

To API pobiera template refs przez tekstowy identyfikator runtime, zamiast przez zmienną, której nazwa musi odpowiadać atrybutowi ref, co dodatkowo umożliwia dynamiczne powiązania refów.

Dokumentacja Composition API Helpers szczegółowo opisuje useTemplateRef() i useId(), także w bardziej złożonych przypadkach z dynamicznymi refami.

API onWatcherCleanup()

Pozwala rejestrować funkcje cleanup wewnątrz watcherów, na przykład po to, by przerwać nieaktualne żądanie fetch, gdy obserwowana wartość zmieni się ponownie. Szczegóły znajdziesz w dokumentacji API.

Deferred teleport

Komponent Teleport zawiera teraz prop defer, który montuje teleportowaną treść po bieżącym cyklu renderowania, dzięki czemu może wskazywać elementy renderowane przez Vue później w tym samym przebiegu. W przewodniku znajdziesz też sekcję poświęconą Teleportowi.

Które aplikacje zyskują najwięcej na Vue 3.5?

Cztery typy aplikacji internetowych zyskują na Vue 3.5 najwięcej.

Narzędzia do analizy danych

Dashboardy analityczne działające w czasie rzeczywistym, narzędzia do monitorowania finansów i platformy do wizualizacji danych na dużą skalę zyskują najwięcej na refaktoryzacji systemu reaktywności, ponieważ przechowują duże tablice reaktywnych danych. Mogą obsługiwać większe zbiory danych, a jednocześnie utrzymywać płynne interakcje.

Aplikacje e-commerce i media

Platformy bogate w treści i serwisy e-commerce korzystają z usprawnień SSR i lazy hydration w Vue 3.5.

Te usprawnienia są szczególnie wartościowe dla sklepów internetowych, platform CMS i platform medialnych, gdzie czas ładowania oraz optymalizacja pod wyszukiwarki bezpośrednio wpływają na wyniki biznesowe. Przewodnik Vue po renderowaniu po stronie serwera wyjaśnia, dlaczego SSR ma tu znaczenie: szybszy time-to-content i lepsze SEO.

CRM-y, ERP-y i platformy do zarządzania

Złożone aplikacje oparte na formularzach, takie jak systemy CRM, platformy do zarządzania ochroną zdrowia i narzędzia ERP, zyskują dzięki ulepszonemu systemowi referencji w szablonach i generowaniu unikalnych ID w Vue 3.5.

Stabilne identyfikatory bezpieczne dla SSR upraszczają łączenie etykiet z polami formularzy pod kątem dostępności w rozbudowanych formularzach.

Interfejsy przypominające chatboty

Aplikacje z dynamicznym interfejsem, takie jak systemy czatowe, platformy powiadomień i narzędzia do współpracy w czasie rzeczywistym, korzystają z ulepszonego systemu reaktywności i deferred teleport w Vue 3.5, który pomaga przy modalach i overlayach renderowanych w dynamicznych układach.

Jakie korzyści biznesowe daje aktualizacja do Vue 3.5?

Premiera Vue 3.5 przynosi korzyści biznesowe dzięki usprawnieniom wydajności, lepszemu doświadczeniu deweloperskiemu i nowym funkcjom API.

Lepsza wydajność i doświadczenie użytkownika

Sprawniejsze przetwarzanie danych przekłada się na szybsze i bardziej responsywne aplikacje. Lazy hydration dla SSR aktywuje komponenty tylko wtedy, gdy są potrzebne, co daje płynniejsze doświadczenie w platformach e-commerce i aplikacjach bogatych w treści.

Wyższa produktywność deweloperów i krótszy time to market

API takie jak useTemplateRef() i useId() ograniczają boilerplate i upraszczają typowe zadania. To mniej kodu do napisania i sprawdzenia przy każdym nowym formularzu lub stronie SSR.

Wsteczna kompatybilność i skalowalność klasy enterprise

Wsteczna kompatybilność Vue 3.5 to praktyczna zaleta dla aplikacji klasy enterprise, w których najbardziej liczą się stabilność i przewidywalne aktualizacje. Aktualizacja bez breaking changes zmniejsza ryzyko i narzut utrzymaniowy.

Co przyniesie Vue 3.6?

Vue 3.6 weszło w fazę release candidate w lipcu 2026 roku, a pod koniec października 2026 osiągnęło wersję v3.6.0-rc.13 (szczegóły na GitHubie). Dwie najważniejsze nowości to:

Przebudowa systemu reaktywności alien signals: Johnson Chu stworzył bibliotekę sygnałów o nazwie „alien signals”, która w benchmarkach wypada lepiej niż istniejące implementacje. Vue 3.6 przebudowuje @vue/reactivity w oparciu o nią, żeby jeszcze bardziej poprawić wydajność i zmniejszyć zużycie pamięci ponad to, co dało już 3.5.

Vapor Mode: nowa strategia renderowania, która kompiluje komponenty do bezpośrednich operacji na DOM, z pominięciem virtual DOM. Notatki do wydania 3.6 RC opisują ją jako funkcjonalnie kompletną. To rozwiązanie opt-in na poziomie komponentu, ale obsługuje tylko komponenty <script setup> i oparte wyłącznie na template, bez Options API, a łączenie go z bibliotekami komponentów opartymi na virtual DOM nadal bywa problematyczne. W praktyce do Vapor przenosi się raczej strony wrażliwe na wydajność niż całą aplikację.

Czy Vue 3.5 zachowuje wsteczną kompatybilność?

Tak. Vue 3.5 nie wprowadza breaking changes dla istniejących aplikacji Vue 3, zgodnie ze stanowiskiem Vue.js wobec deprecacji:

„Możemy okresowo oznaczać funkcje jako przestarzałe w wydaniach minor, jeśli pojawią się dla nich nowe, lepsze zamienniki. Oznaczone jako przestarzałe funkcje nadal będą działać i zostaną usunięte dopiero w kolejnym wydaniu głównym po nadaniu im statusu deprecated.”

Dla zespołów przechodzących z Vue 2 Vue 3 Migration Build (@vue/compat) nadal pozostaje pomostem: uruchamia kod w stylu Vue 2 na runtime Vue 3 i pokazuje ostrzeżenia o deprecacjach, dzięki czemu możesz usuwać wzorce z Vue 2 stopniowo, zamiast robić jedno duże przełączenie. Narzędzia takie jak Vite i Pinia przyspieszyły tę zmianę, oferując nowoczesne narzędzia do budowania i zarządzania stanem.

Wyzwania nadal dotyczą projektów zależnych od starszych bibliotek zewnętrznych, które nie obsługują jeszcze w pełni Vue 3, choć ta lista stale się kurczy.

Taka migracja opłaca się wtedy, gdy jej zakres jest dobrze ograniczony. Monterail przeniósł serwis marketingowy Easyship z AngularJS na Vue.js, osiągając 36% wzrost współczynnika konwersji i 37% poprawę wydajności w mniej niż trzy miesiące. Te wyniki przyniosły nowoczesne narzędzia, czysta architektura komponentów i konsekwentna dbałość o wydajność.

Czy Vue 3.5 jest gotowe do zastosowań w skali enterprise?

Vue 3.5 to przyrostowe wydanie skupione na wewnętrznych mechanizmach i właśnie dlatego łatwo uzasadnić tę aktualizację: korzyści związane z pamięcią i hydratacją pojawiają się bez przebudowy, podczas gdy Vue 3.6 nadal jest w release candidate. Dla większości zespołów prawdziwym wyzwaniem nie jest podbicie wersji. Chodzi raczej o te elementy ekosystemu, które zostają w tyle, jak starsze biblioteki zewnętrzne, kod Vue 2 nadal działający na produkcji czy bazy kodu, które mieszają Options API i Composition API bez jasnych konwencji.

Jeśli planujesz aktualizację do Vue 3.5 albo migrację z Vue 2 i szukasz zespołu, który wdraża Vue na produkcji od 2015 roku, porozmawiaj z Monterail o zakresie takiego projektu.