Vue Academy · Lezione

Panoramica delle fasi del ciclo di vita

Creazione, montaggio, aggiornamento, smontaggio — cosa accade in ogni fase

Panoramica delle fasi del ciclo di vita è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 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.

Un componente ha un ciclo di vita

Ogni componente Vue attraversa un percorso prevedibile: viene creato, montato nella pagina, aggiornato quando cambiano i dati e infine rimosso. Queste sono le fasi del ciclo di vita, e Vue permette di collegarsi a ciascuna di esse.

Le quattro fasi

Creazione — viene eseguito setup e inizializzata la reattività.
Montaggio — il DOM viene creato e inserito.
Aggiornamento — i cambiamenti reattivi attivano nuovi rendering.
Smontaggio — il componente viene rimosso e ripulito.

Fase 1: creazione

Per prima cosa viene creata l'istanza del componente e viene configurata la reattività. Nella Composition API, <script setup> (oppure setup()) viene eseguito in questa fase. Il DOM non esiste ancora, quindi a questo punto non è possibile leggere gli elementi.

Cosa si può fare durante la creazione

La fase di creazione è adatta per dichiarare lo stato reattivo e avviare attività non dipendenti dal DOM, come iniziare il recupero dei dati. Ricordi che il template non è ancora stato renderizzato, quindi i ref del DOM sono ancora vuoti.

<script setup>
import { ref } from 'vue'
const user = ref(null)
// fetch can start here
</script>

Fase 2: montaggio

Successivamente Vue crea i nodi DOM effettivi dal template e li inserisce nella pagina. Dopo il montaggio, i ref del template puntano a elementi reali ed è possibile misurare o modificare il DOM.

L'hook di montaggio

onMounted viene eseguito una volta, subito dopo l'inserimento del componente. È il punto adatto per la configurazione che dipende dal DOM, come inizializzare un grafico o impostare il focus su un input.

<script setup>
import { onMounted } from 'vue'
onMounted(() => {
  console.log('in the DOM now')
})
</script>

Fase 3: aggiornamento

Quando cambiano i dati reattivi da cui dipende un componente, Vue esegue nuovamente il rendering e aggiorna il DOM in modo efficiente, intervenendo solo sulle parti cambiate. Questo ciclo di aggiornamento può ripetersi molte volte durante il ciclo di vita di un componente.

Gli hook di aggiornamento

onBeforeUpdate viene eseguito subito prima dell'aggiornamento del DOM, mentre onUpdated viene eseguito subito dopo. Vengono attivati a ogni cambiamento reattivo che influisce sul rendering.

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM patched')
})
</script>

Fase 4: smontaggio

Quando un componente viene rimosso, tramite v-if, un cambiamento di rotta o la rimozione da una lista, Vue lo smantella. Questa è l'occasione per ripulire timer, listener e sottoscrizioni, così da evitare perdite di memoria.

L'hook di smontaggio

onUnmounted viene eseguito dopo che il componente è stato rimosso. Qui annulli gli intervalli, rimuovi i listener globali e interrompi le richieste in corso.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>

L'ordine completo

Durante il ciclo di vita di un componente, gli hook vengono eseguiti in questo ordine: setup, onBeforeMount, onMounted, poi coppie ripetute di onBeforeUpdate/onUpdated e infine onBeforeUnmount/onUnmounted.

Verifica rapida

Verifichi la Sua comprensione del ciclo di vita.

Riepilogo

Ora ha una visione completa:

Creazione: viene eseguita la configurazione, la reattività è pronta, ma non c'è ancora il DOM.
Montaggio: il DOM viene creato e inserito; i ref diventano utilizzabili.
Aggiornamento: una modifica reattiva attiva un patch efficiente.
Smontaggio: il componente viene rimosso; esegua qui la pulizia.

Domande Frequenti

La lezione «Panoramica delle fasi del ciclo di vita» è gratuita?

Sì — il testo completo di «Panoramica delle fasi del ciclo di vita» è 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 «Panoramica delle fasi del ciclo di vita»?

Creazione, montaggio, aggiornamento, smontaggio — cosa accade in ogni fase 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 1 di 4.

Quanto tempo richiede la lezione «Panoramica delle fasi del ciclo di vita»?

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