Vue Academy · Lezione

onMounted e onBeforeMount

Accesso al DOM in onMounted, perché onBeforeMount raramente richiede un utilizzo diretto

onMounted e onBeforeMount è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Hook relativi al montaggio

La fase di montaggio ha due hook: onBeforeMount viene eseguito subito prima della creazione del DOM, mentre onMounted viene eseguito subito dopo il suo inserimento. Sembrano simili, ma rispondono a esigenze molto diverse.

onMounted: il DOM è pronto

Quando viene eseguito onMounted, il template del componente è già stato renderizzato e si trova nella pagina. I ref del template puntano a elementi reali, quindi è qui che va eseguito il lavoro sul DOM.

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

Caso d'uso: inizializzare un grafico

Le librerie che disegnano all'interno di un elemento DOM hanno bisogno che l'elemento esista già. Le inizializzi in onMounted, passando l'elemento referenziato dal ref.

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

Caso d'uso: misurare il DOM

Per leggere dimensioni, posizioni o offset di scorrimento è necessario disporre del DOM reale. onMounted è il primo momento sicuro in cui misurare un elemento.

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

Caso d'uso: recuperare i dati iniziali

Recuperare i dati quando il componente viene visualizzato è un compito tipico di onMounted. Memorizzi il risultato in un ref, così il template si aggiornerà quando i dati arriveranno.

<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 viene eseguito una sola volta

onMounted viene eseguito una sola volta per ogni istanza del componente. Se il componente viene smontato e ricreato in seguito, la nuova istanza esegue il proprio onMounted.

onBeforeMount: subito prima dell'inserimento

onBeforeMount viene eseguito dopo la configurazione, ma prima della creazione del DOM. Lo stato reattivo esiste, ma i ref del template sono ancora null perché non è stato ancora renderizzato nulla.

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

Perché onBeforeMount è usato raramente

La maggior parte delle operazioni di configurazione può essere eseguita direttamente in <script setup> (che viene già eseguito prima del montaggio), mentre tutto ciò che riguarda il DOM deve attendere onMounted. Per questo onBeforeMount ha pochi utilizzi pratici.

Un errore comune

Provare ad accedere a un ref del template all'interno della configurazione o di onBeforeMount restituisce null. L'elemento non esiste finché il montaggio non è completato. Sposti sempre l'accesso al DOM in onMounted.

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

Registrare più hook

Può chiamare onMounted più di una volta: tutte le callback vengono eseguite in ordine. Per questo i composable possono registrare ciascuno il proprio onMounted in modo indipendente.

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

Quale scegliere

onMounted: DOM disponibile — grafici, misurazioni, focus, recupero dei dati.
onBeforeMount: hook pre-rendering, senza DOM, usato raramente.

Verifica rapida

Metta alla prova le Sue conoscenze sugli hook di montaggio.

Riepilogo

Riepilogo degli hook di montaggio:

onMounted viene eseguito dopo l'inserimento del DOM: lo utilizzi per inizializzare grafici, eseguire misurazioni, impostare il focus e recuperare i dati iniziali.
Viene eseguito una volta per istanza e può essere registrato più volte.
onBeforeMount viene eseguito prima del rendering, senza accesso al DOM, e viene usato raramente.

Domande Frequenti

La lezione «onMounted e onBeforeMount» è gratuita?

Sì — il testo completo di «onMounted e onBeforeMount» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «onMounted e onBeforeMount»?

Accesso al DOM in onMounted, perché onBeforeMount raramente richiede un utilizzo diretto Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «onMounted e onBeforeMount»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Vue Academy