Vue Academy · Lekcja

onUpdated i onBeforeUpdate

Reagowanie na zmiany danych reaktywnych, unikanie nieskończonych pętli aktualizacji w onUpdated.

Lekcja 3 z 413 kroki

onUpdated i onBeforeUpdate to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 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.

Hooki związane z aktualizowaniem

Gdy zmieniają się dane reaktywne, Vue ponownie renderuje komponent. Dwa hooki wyznaczają granice tego procesu: onBeforeUpdate jest wywoływany przed aktualizacją DOM, a onUpdated — po niej.

onUpdated: po aktualizacji

onUpdated wykonuje się, gdy DOM zostanie zaktualizowany tak, aby odzwierciedlał nowy stan reaktywny. W tym momencie wyrenderowany DOM odpowiada danym.

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM is now up to date')
})
</script>

Odczytywanie zaktualizowanego DOM

Ponieważ aktualizacja została zakończona, onUpdated jest właściwym miejscem do odczytywania nowych rozmiarów lub pozycji elementów zależnych od najnowszego renderowania.

<script setup>
import { ref, onUpdated } from 'vue'
const list = ref(null)
onUpdated(() => {
  console.log(list.value.scrollHeight)
})
</script>

Pułapka nieskończonej pętli

Nigdy nie należy modyfikować stanu reaktywnego wewnątrz onUpdated. Taka modyfikacja wywołuje kolejne renderowanie, które ponownie uruchamia onUpdated, a ten znów modyfikuje stan — powstaje nieskończona pętla zamrażająca aplikację.

<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
onUpdated(() => {
  count.value++ // BAD: infinite update loop
})
</script>

Zamiast tego użyj watch

Jeśli chcą Państwo reagować na zmianę konkretnej wartości, należy użyć watch, a nie onUpdated. Watch obserwuje jedno źródło i eliminuje ryzyko pętli, natomiast onUpdated wykonuje się przy każdym renderowaniu.

watch(count, (newVal) => {
  console.log('count became', newVal)
})

onBeforeUpdate: przed aktualizacją

onBeforeUpdate wykonuje się po zmianie reaktywnej, ale przed aktualizacją DOM przez Vue. W tym momencie DOM nadal pokazuje stare wartości.

<script setup>
import { onBeforeUpdate } from 'vue'
onBeforeUpdate(() => {
  console.log('DOM still has old values')
})
</script>

Przypadek użycia: migawka przed aktualizacją

Ponieważ onBeforeUpdate widzi stary DOM, doskonale nadaje się do zapisania jego stanu przed zmianą — na przykład do zapamiętania bieżącej pozycji przewijania, aby przywrócić ją po aktualizacji.

<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue'
const el = ref(null)
let savedScroll = 0
onBeforeUpdate(() => { savedScroll = el.value.scrollTop })
onUpdated(() => { el.value.scrollTop = savedScroll })
</script>

Wykonują się przy każdym renderowaniu

Oba hooki wykonują się w każdym cyklu aktualizacji, który może występować często. Ich funkcje zwrotne powinny być krótkie, aby uniknąć problemów z wydajnością.

Nie służą do efektów ubocznych związanych z danymi

Te hooki dotyczą DOM, a nie danych. W przypadku reakcji zależnych od danych należy używać computed (dla wartości pochodnych) lub watch (dla efektów ubocznych konkretnych źródeł).

Podsumowanie kolejności

Po zmianie reaktywnej kolejność jest następująca: zmiana stanu, wykonanie onBeforeUpdate (stary DOM), aktualizacja DOM przez Vue, a następnie wykonanie onUpdated (nowy DOM).

Jak wybrać właściwy hook

onBeforeUpdate: zapisanie stanu starego DOM, na przykład przewijania lub zaznaczenia.
onUpdated: odczytanie nowego DOM po aktualizacji — nie wolno jednak modyfikować tutaj stanu reaktywnego.

Szybki test

Proszę sprawdzić swoją wiedzę na temat hooków aktualizacji.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Podsumowanie hooków aktualizacji:

onUpdated wykonuje się po aktualizacji DOM — tutaj należy odczytywać nowe rozmiary.
Nigdy nie należy modyfikować w nim stanu reaktywnego (nieskończona pętla); zamiast tego należy użyć watch.
onBeforeUpdate wykonuje się przed aktualizacją, gdy DOM zawiera stare wartości — świetnie nadaje się do tworzenia migawek.
Oba hooki wykonują się przy każdym renderowaniu, dlatego powinny być lekkie.

Bezpłatny start

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

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „onUpdated i onBeforeUpdate” jest bezpłatna?

Tak — pełny tekst „onUpdated i onBeforeUpdate” 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 „onUpdated i onBeforeUpdate”?

Reagowanie na zmiany danych reaktywnych, unikanie nieskończonych pętli aktualizacji w onUpdated. Ć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 3 z 4.

Ile czasu zajmuje lekcja „onUpdated i onBeforeUpdate”?

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

← Powrót do Vue Academy