Vue Academy · Oppitunti

onMounted ja onBeforeMount

DOM:n käyttäminen onMountedissa, miksi onBeforeMountia tarvitsee harvoin käyttää suoraan.

Oppitunti 2/413 vaihetta

onMounted ja onBeforeMount on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Mounttauksen ympärillä olevat hookit

Mounttausvaiheessa on kaksi hookia: onBeforeMount suoritetaan juuri ennen DOM:n luomista ja onMounted heti sen jälkeen, kun DOM on liitetty. Ne vaikuttavat samanlaisilta, mutta palvelevat hyvin erilaisia tarpeita.

onMounted: DOM on valmis

Kun onMounted suoritetaan, komponentin template on renderöity ja sivulla. Templaten ref-viittaukset osoittavat todellisiin elementteihin, joten DOM:iin liittyvä työ kuuluu tähän vaiheeseen.

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

Käyttötapaus: kaavion alustaminen

DOM-elementtiin piirtävät kirjastot tarvitsevat elementin ensin. Alustakaa ne onMounted-hookissa välittämällä ref-elementti.

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

Käyttötapaus: DOM-mittausten tekeminen

Kokojen, sijaintien tai vieritysoffsetien lukeminen edellyttää todellista DOM:ia. onMounted on aikaisin turvallinen hetki elementin mittaamiseen.

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

Käyttötapaus: alustava tietojen haku

Tietojen hakeminen komponentin ilmestyessä on klassinen onMounted-tehtävä. Tallettakaa tulos ref-muuttujaan, jotta template päivittyy tietojen saapuessa.

<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 suoritetaan kerran

onMounted suoritetaan kerran kutakin komponentti-instanssia kohden. Jos komponentti unmountataan ja luodaan myöhemmin uudelleen, uusi instanssi suorittaa oman onMounted-hookinsa.

onBeforeMount: juuri ennen liittämistä

onBeforeMount suoritetaan setupin jälkeen mutta ennen DOM:n luomista. Reaktiivinen tila on olemassa, mutta templaten ref-viittaukset ovat edelleen null, koska mitään ei ole vielä renderöity.

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

Miksi onBeforeMountia tarvitaan harvoin

Useimmat alustustehtävät voidaan tehdä suoraan <script setup>-osiossa, joka suoritetaan jo ennen mounttausta, ja DOM:iin liittyvien tehtävien on joka tapauksessa odotettava onMounted-hookia. Siksi onBeforeMount-hookille on vain vähän käytännön käyttötarkoituksia.

Yleinen virhe

Templaten ref-viittauksen yrittäminen setupissa tai onBeforeMount-hookissa palauttaa arvon null. Elementtiä ei ole olemassa ennen kuin mounttaus on valmis. Siirtäkää DOM:n käyttö aina onMounted-hookiin.

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

Useiden hookien rekisteröiminen

Voitte kutsua onMounted-hookia useammin kuin kerran; kaikki callback-funktiot suoritetaan järjestyksessä. Siksi composable-funktiot voivat rekisteröidä omat onMounted-hookinsa toisistaan riippumatta.

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

Kumman valitsette

onMounted: DOM on käytettävissä — kaaviot, mittaukset, fokuksen asettaminen ja tietojen haku.
onBeforeMount: ennen renderöintiä suoritettava hook, ei DOM:ia, tarvitaan harvoin.

Pikatarkistus

Testatkaa tietonne mounttaushookeista.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Mounttaushookien yhteenveto:

onMounted suoritetaan DOM:n liittämisen jälkeen — käyttäkää sitä kaavion alustamiseen, mittauksiin, fokuksen asettamiseen ja alustaviin tietohakuihin.
Se suoritetaan kerran kutakin instanssia kohden, ja sen voi rekisteröidä useita kertoja.
onBeforeMount suoritetaan ennen renderöintiä ilman DOM:n käyttöä, ja sitä tarvitaan harvoin.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”onMounted ja onBeforeMount” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “onMounted ja onBeforeMount”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”onMounted ja onBeforeMount”?

DOM:n käyttäminen onMountedissa, miksi onBeforeMountia tarvitsee harvoin käyttää suoraan. Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”onMounted ja onBeforeMount”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Vue Academy