Vue Academy · Lekcja

onMounted i onBeforeMount

Uzyskiwanie dostępu do DOM w onMounted, dlaczego onBeforeMount rzadko wymaga bezpośredniego użycia.

onMounted i onBeforeMount to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 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 montowaniem

Faza montowania ma dwa hooki: onBeforeMount jest wywoływany tuż przed utworzeniem DOM, a onMounted — zaraz po jego wstawieniu. Wyglądają podobnie, ale służą zupełnie innym celom.

onMounted: DOM jest gotowy

W momencie wywołania onMounted szablon komponentu jest już wyrenderowany i znajduje się na stronie. Referencje szablonu wskazują rzeczywiste elementy, dlatego właśnie tutaj należy wykonywać operacje na DOM.

<script setup>
import { ref, onMounted } from 'vue'
const box = ref(null)
onMounted(() => {
  console.log(box.value.offsetWidth)
})
</script>

Przypadek użycia: inicjalizacja wykresu

Biblioteki rysujące w elemencie DOM wymagają, aby ten element najpierw istniał. Należy je inicjalizować w onMounted, przekazując element wskazywany przez referencję.

<script setup>
import { ref, onMounted } from 'vue'
const canvas = ref(null)
onMounted(() => {
  const ctx = canvas.value.getContext('2d')
  // draw chart with ctx
})
</script>

Przypadek użycia: pomiary DOM

Odczytywanie rozmiarów, pozycji lub offsetów przewijania wymaga rzeczywistego DOM. onMounted jest najwcześniejszym bezpiecznym momentem na zmierzenie elementu.

onMounted(() => {
  const rect = box.value.getBoundingClientRect()
  console.log(rect.height)
})

Przypadek użycia: początkowe pobieranie danych

Pobieranie danych w momencie pojawienia się komponentu to klasyczne zadanie dla onMounted. Wynik należy zapisać w refie, aby po jego otrzymaniu szablon został zaktualizowany.

<script setup>
import { ref, onMounted } from 'vue'
const posts = ref([])
onMounted(async () => {
  const res = await fetch('/api/posts')
  posts.value = await res.json()
})
</script>

onMounted wykonuje się raz

onMounted jest wywoływany jeden raz dla każdej instancji komponentu. Jeśli komponent zostanie odmontowany, a następnie utworzony ponownie, nowa instancja wykona własny onMounted.

onBeforeMount: tuż przed wstawieniem

onBeforeMount wykonuje się po konfiguracji, ale przed utworzeniem DOM. Stan reaktywny już istnieje, jednak referencje szablonu nadal mają wartość null, ponieważ nic jeszcze nie zostało wyrenderowane.

<script setup>
import { onBeforeMount } from 'vue'
onBeforeMount(() => {
  console.log('about to render')
})
</script>

Dlaczego onBeforeMount jest rzadko potrzebny

Większość prac konfiguracyjnych można wykonać bezpośrednio w <script setup> (który i tak wykonuje się przed zamontowaniem), a wszystko, co dotyczy DOM, musi poczekać na onMounted. Z tego powodu onBeforeMount ma niewiele praktycznych zastosowań.

Częsty błąd

Próba uzyskania dostępu do referencji szablonu wewnątrz konfiguracji lub onBeforeMount zwraca null. Element nie istnieje, dopóki montowanie nie zostanie zakończone. Dostęp do DOM należy zawsze przenieść do onMounted.

<script setup>
import { ref } from 'vue'
const input = ref(null)
console.log(input.value) // null - too early!
</script>

Rejestrowanie wielu hooków

Można wywołać onMounted więcej niż raz — wszystkie funkcje zwrotne zostaną wykonane po kolei. Dzięki temu composables mogą niezależnie rejestrować własne funkcje onMounted.

onMounted(() => console.log('first'))
onMounted(() => console.log('second'))

Jak wybrać właściwy hook

onMounted: DOM jest dostępny — wykresy, pomiary, ustawianie fokusu, pobieranie danych.
onBeforeMount: hook przed renderowaniem, bez dostępu do DOM, rzadko potrzebny.

Szybki test

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

Podsumowanie

Podsumowanie hooków montowania:

onMounted wykonuje się po wstawieniu DOM — należy używać go do inicjalizacji wykresów, pomiarów, ustawiania fokusu i początkowego pobierania danych.
Wykonuje się raz dla każdej instancji i można go rejestrować wielokrotnie.
onBeforeMount wykonuje się przed renderowaniem, bez dostępu do DOM, i jest rzadko potrzebny.

Często zadawane pytania

Czy lekcja „onMounted i onBeforeMount” jest bezpłatna?

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

Uzyskiwanie dostępu do DOM w onMounted, dlaczego onBeforeMount rzadko wymaga bezpośredniego użycia. Ć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 4.

Ile czasu zajmuje lekcja „onMounted i onBeforeMount”?

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