v-memo do zapamiętywania szablonów
Dyrektywa v-memo, tablica zależności, sytuacje pomijania ponownego renderowania oraz porównanie z computed.
v-memo do zapamiętywania szablonów to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.
Czym jest v-memo
v-memo memoizuje sekcję szablonu. Vue przechowuje w pamięci wyrenderowany wynik i ponownie renderuje to poddrzewo tylko wtedy, gdy zmieni się jedna z wymienionych zależności. Jest to rozwiązanie wydajnościowe stosowane w przypadku kosztownego, w większości statycznego oznaczenia.
Tablica zależności
Wiąże się tablicę zależności. Dopóki każda wartość w tablicy jest równa swojej poprzedniej wartości, Vue pomija aktualizowanie całego elementu i jego dzieci.
<div v-memo="[dep1, dep2]">
<!-- skipped unless dep1 or dep2 change -->
</div>Pusta tablica
Pusta tablica v-memo="[]" oznacza, że zawartość zostanie wyrenderowana raz i nigdy nie będzie aktualizowana — odpowiada to jednokrotnemu wyrenderowaniu statycznej zawartości.
<div v-memo="[]">
<!-- rendered once, never re-rendered -->
</div>Główny przypadek użycia: v-for
Głównym powodem używania v-memo są ogromne listy. Należy umieścić je wewnątrz v-for, aby każdy wiersz był ponownie renderowany tylko wtedy, gdy zmienią się dotyczące go dane.
<div
v-for="item in list"
:key="item.id"
v-memo="[item.id === selectedId]"
>
...
</div>Memoizowanie zaznaczonego wiersza
W klasycznym przykładzie tysiące wierszy jest ponownie renderowanych tylko wtedy, gdy zmieni się ich stan zaznaczenia. Porównanie item.id === selectedId sprawia, że wiersz aktualizuje się tylko wtedy, gdy zostanie zaznaczony lub przestanie być zaznaczony.
<tr
v-for="item in items"
:key="item.id"
v-memo="[item.id === selectedId]"
>
<td :class="{ active: item.id === selectedId }">
{{ item.name }}
</td>
</tr>Wymień wszystkie zależności reaktywne
Należy uwzględnić każdą wartość reaktywną, od której zależy poddrzewo. Jeśli któraś zostanie pominięta, element nie zaktualizuje się po jej zmianie — powstanie trudny do wykrycia błąd nieaktualnego interfejsu.
<!-- WRONG: name can change but is not listed -->
<div v-memo="[item.id]">{{ item.name }}</div>Nigdy nie łącz z v-if
Nie należy umieszczać v-memo na tym samym elemencie co v-if ani łączyć go w sposób powodujący konflikt ze strukturalnymi dyrektywami v-for. W szczególności v-memo i v-if na tym samym elemencie nie są obsługiwane i prowadzą do niezdefiniowanego zachowania.
<!-- AVOID -->
<div v-memo="[a]" v-if="show">...</div>v-memo a computed
computed przechowuje w pamięci wartość wyprowadzoną ze stanu reaktywnego. v-memo przechowuje w pamięci wyrenderowane VNodes. Rozwiązują różne problemy: computed zapobiega ponownemu obliczaniu danych, a v-memo ponownemu renderowaniu oznaczenia.
Kiedy computed wystarczy
Jeśli wąskim gardłem jest ponowne obliczanie danych — filtrowanie, sortowanie lub formatowanie — w pierwszej kolejności należy użyć computed. Jest prostsze i trudniej użyć go nieprawidłowo.
import { computed } from "vue";
const sorted = computed(() =>
[...items.value].sort((a, b) => a.rank - b.rank)
);Kiedy pomaga v-memo
Po v-memo należy sięgać tylko wtedy, gdy profilowanie pokaże, że ponowne renderowanie dużej listy dominuje czas działania, a większość wierszy pozostaje niezmieniona między aktualizacjami.
Najpierw zmierz
v-memo zwiększa narzut pamięci i koszt porównań. W przypadku małych list może działać wolniej niż zwykłe renderowanie. Zawsze należy wykonać profilowanie przed użyciem i po nim, aby potwierdzić rzeczywistą korzyść.
Szybki test
Kiedy v-memo jest właściwym narzędziem?
Podsumowanie
v-memo="[deps]" pomija ponowne renderowanie poddrzewa, dopóki wszystkie wymienione zależności pozostają niezmienione — idealnie sprawdza się wewnątrz dużych list v-for. Należy wymienić każdą zależność reaktywną, nigdy nie łączyć v-memo z v-if na tym samym elemencie, preferować computed dla wartości pochodnych i zawsze wykonać profilowanie, aby potwierdzić rzeczywistą poprawę wydajności.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 42
- Lekcje
- 156
Często zadawane pytania
Czy lekcja „v-memo do zapamiętywania szablonów” jest bezpłatna?
Tak — pełny tekst „v-memo do zapamiętywania szablonów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „v-memo do zapamiętywania szablonów”?
Dyrektywa v-memo, tablica zależności, sytuacje pomijania ponownego renderowania oraz porównanie z computed. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „v-memo do zapamiętywania szablonów”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?
Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- v-memo do zapamiętywania szablonów
- Profilowanie za pomocą karty Performance w Vue DevTools
- Wirtualne przewijanie dużych list
- Web Workers z Vue