Vue Academy · Lektion

onMounted och onBeforeMount

Åtkomst till DOM i onMounted, varför onBeforeMount sällan behöver användas direkt.

Lektion 2 av 413 steg

onMounted och onBeforeMount är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.

Hookar kring montering

Monteringsfasen har två hookar: onBeforeMount körs precis innan DOM skapas och onMounted körs direkt efter att den har infogats. De ser likadana ut, men fyller helt olika behov.

onMounted: DOM är klar

När onMounted körs har komponentens mall renderats och finns på sidan. Template-refs pekar på riktiga element, så det är här DOM-relaterat arbete hör hemma.

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

Användningsfall: Initiera ett diagram

Bibliotek som ritar i ett DOM-element behöver att elementet finns först. Initiera dem i onMounted och skicka med ref-elementet.

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

Användningsfall: DOM-mätningar

För att läsa storlekar, positioner eller scrollförskjutningar krävs en riktig DOM. onMounted är den tidigaste säkra tidpunkten för att mäta ett element.

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

Användningsfall: Hämta initial data

Att hämta data när komponenten visas är ett klassiskt användningsområde för onMounted. Spara resultatet i en ref så att mallen uppdateras när det kommer.

<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 körs en gång

onMounted körs en enda gång per komponentinstans. Om komponenten avmonteras och senare skapas igen kör den nya instansen sin egen onMounted.

onBeforeMount: Precis före infogning

onBeforeMount körs efter setup men innan DOM skapas. Det reaktiva tillståndet finns, men template-refs är fortfarande null eftersom inget har renderats ännu.

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

Varför onBeforeMount sällan behövs

Det mesta initieringsarbetet kan göras direkt i <script setup> (som redan körs före montering), och allt DOM-relaterat måste vänta till onMounted. Därför har onBeforeMount få praktiska användningsområden.

Ett vanligt misstag

Om ni försöker komma åt en template-ref i setup eller onBeforeMount får ni null. Elementet finns inte förrän monteringen är klar. Flytta alltid åtkomst till DOM till onMounted.

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

Registrera flera hookar

Ni kan anropa onMounted flera gånger; alla callback-funktioner körs i ordning. Därför kan varje composable registrera sin egen onMounted oberoende av de andra.

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

Välja mellan dem

onMounted: DOM är tillgänglig — diagram, mätningar, fokus och datahämtning.
onBeforeMount: hook före rendering, ingen DOM, behövs sällan.

Snabbtest

Testa era kunskaper om monteringshookar.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Sammanfattning av monteringshookar:

onMounted körs efter att DOM har infogats — använd den för att initiera diagram, göra mätningar, sätta fokus och hämta initial data.
Den körs en gång per instans och kan registreras flera gånger.
onBeforeMount körs före rendering utan åtkomst till DOM och behövs sällan.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”onMounted och onBeforeMount” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”onMounted och onBeforeMount”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”onMounted och onBeforeMount”?

Åtkomst till DOM i onMounted, varför onBeforeMount sällan behöver användas direkt. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”onMounted och onBeforeMount”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Vue Academy