Techniki memoizacji
Unikanie zbędnych obliczeń dzięki memoizacji.
Techniki memoizacji to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 3. 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 3 lekcji w sumie.
Wykonywanie mniejszej ilości pracy
Wydajność często wynika z nieprzeliczania ponownie ani nieponownego renderowania elementów, które się nie zmieniły. Vue udostępnia kilka narzędzi do memoizacji, które buforują wyniki i pomijają niepotrzebne aktualizacje.
Buforowanie computed
Właściwość computed buforuje swój wynik i przelicza go ponownie tylko wtedy, gdy zmieni się jedna z jej reaktywnych zależności. Dzięki temu jest znacznie wydajniejsza niż metoda uruchamiana przy każdym renderowaniu.
computed: {
expensiveTotal() {
return this.items.reduce((sum, i) => sum + i.price, 0)
}
}computed a metoda
Metoda jest uruchamiana przy każdym ponownym renderowaniu szablonu, nawet gdy jej dane wejściowe są identyczne. Właściwość computed ponownie wykorzystuje zbuforowaną wartość, dlatego w przypadku danych pochodnych używanych w szablonach należy preferować computed.
// method: runs on EVERY render
methods: { total() { /* ... */ } }
// computed: cached until items change
computed: { total() { /* ... */ } }v-once dla treści statycznej
Dyrektywa v-once renderuje element jednokrotnie, a następnie pomija go przy wszystkich kolejnych aktualizacjach. Należy jej używać w przypadku treści, która nigdy się nie zmienia.
<template>
<h1 v-once>{{ appTitle }}</h1>
</template>Kiedy używać v-once
Dyrektywę v-once należy stosować do dużych sekcji statycznych, takich jak stopka, tekst warunków lub stały nagłówek. Vue traktuje wyrenderowany wynik jako statyczny i nigdy nie porównuje go ponownie.
<footer v-once>
<p>Copyright 2024. All rights reserved.</p>
</footer>v-memo dla kosztownych list
Dyrektywa v-memo zapamiętuje poddrzewo i renderuje je ponownie tylko wtedy, gdy zmienią się wartości w jego tablicy zależności. Jest szczególnie przydatna w przypadku dużych list.
<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
{{ item.name }} - {{ item.selected }}
</div>Jak działa v-memo
Każdy element jest renderowany ponownie tylko wtedy, gdy zmieni się jego tablica memoizacji. Jeśli wartość item.selected pozostaje taka sama, Vue całkowicie pomija ponowne renderowanie tego wiersza, nawet jeśli komponent nadrzędny zostanie zaktualizowany.
Unikanie niepotrzebnego ponownego renderowania
Komponenty są renderowane ponownie, gdy zmienią się ich dane reaktywne lub props. Komponenty powinny być małe i skoncentrowane na jednym zadaniu, aby zmiana w jednym obszarze nie wymuszała ponownego renderowania niezwiązanych z nim części.
Stabilne klucze na listach
Dyrektywie v-for należy zawsze nadawać stabilny i unikalny atrybut :key. Użycie indeksu tablicy jako klucza może spowodować, że Vue ponownie wykorzysta niewłaściwe węzły DOM i wykona więcej ponownych renderowań, niż jest to konieczne.
<!-- prefer a stable id -->
<li v-for="user in users" :key="user.id">{{ user.name }}</li>Ograniczanie danych reaktywnych
Do stanu reaktywnego należy dodawać dane tylko wtedy, gdy zależy od nich szablon. Duże obiekty lub wartości, które nigdy nie zmieniają się w interfejsie, zwiększają narzut śledzenia reaktywności. W odpowiednich sytuacjach należy używać zwykłych, niereaktywnych zmiennych.
import { shallowRef } from "vue"
// shallowRef avoids deep reactivity on large objects
const bigConfig = shallowRef(loadConfig())Memoizacja funkcji czystych
W przypadku czystych obliczeń w JavaScript, wykonywanych poza systemem reaktywności Vue, można buforować wyniki w prostej mapie, aby kolejne wywołania z tym samym argumentem zwracały wynik natychmiast.
const cache = new Map()
function fib(n) {
if (n < 2) return n
if (cache.has(n)) return cache.get(n)
const result = fib(n - 1) + fib(n - 2)
cache.set(n, result)
return result
}Szybki sprawdzian
Proszę sprawdzić swoją wiedzę na temat memoizacji.
Podsumowanie
Należy ograniczać marnowanie zasobów dzięki buforowaniu: właściwości computed zapamiętują wartości pochodne, v-once renderuje treść statyczną jednokrotnie, a v-memo pomija ponowne renderowanie poddrzew na dużych listach. Należy używać stabilnych kluczy i ograniczać stan reaktywny do minimum. W następnej części poznają Państwo sposoby znajdowania i usuwania wąskich gardeł wydajności za pomocą rzeczywistych narzędzi.
Często zadawane pytania
Czy lekcja „Techniki memoizacji” jest bezpłatna?
Tak — pełny tekst „Techniki memoizacji” 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 3 lekcji w sumie.
Co nauczysz się w „Techniki memoizacji”?
Unikanie zbędnych obliczeń dzięki memoizacji. Ć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 2 z 3.
Ile czasu zajmuje lekcja „Techniki memoizacji”?
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
- Leniwe ładowanie i dzielenie kodu
- Techniki memoizacji
- Identyfikowanie i usuwanie wąskich gardeł