Vue.js

Aspetto

In questa pagina

Hook del Ciclo di Vita ​

Quando viene creata, ciascuna istanza di un componente Vue attraversa una serie di passaggi di inizializzazione - ad esempio: deve impostare l'osservazione dei dati, compilare il template, montare l'istanza nel DOM e aggiornare il DOM quando i dati cambiano. Lungo il percorso, esegue anche delle funzioni chiamate hook del ciclo di vita, dando agli utenti l'opportunità di aggiungere il proprio codice in specifiche fasi.

Registrazione degli Hook del Ciclo di Vita ​

Ad esempio, l'hook onMountedmounted può essere utilizzato per eseguire del codice dopo che il componente ha terminato il rendering iniziale e creato i nodi del DOM:

vue
<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`il componente è ora montato.`)
})
</script>
js
export default {
  mounted() {
    console.log(`il componente è ora montato.`)
  }
}

Ci sono anche altri hook che verranno chiamati in diverse fasi del ciclo di vita dell'istanza del componente, quelli comunemente utilizzati sono onMounted, onUpdated e onUnmounted. mounted, updated e unmounted.

Tutti gli hook del ciclo di vita sono chiamati con il loro contesto this che punta all'istanza corrente attiva che li invoca. Nota: ciò significa che dovresti evitare di utilizzare le funzioni arrow quando dichiari gli hook del ciclo di vita, poiché, se lo fai, non sarai in grado di accedere all'istanza del componente tramite this.

Quando si chiama onMounted, Vue associa automaticamente la funzione di callback registrata con l'istanza corrente del componente attivo. Questo richiede che gli hook vengano registrati in maniera sincronizzata durante l'installazione del componente. Ad esempio, non fare questo:

js
setTimeout(() => {
  onMounted(() => {
    // questo non funzionerà.
  })
}, 100)

Si noti che ciò non significa che la chiamata debba essere posta lessicalmente all'interno di setup() o <script setup>. onMounted() può essere chiamato in una funzione esterna purché lo stack di chiamate sia sincrono e abbia origine all'interno di setup().

Diagramma del Ciclo di Vita ​

Di seguito è riportato un diagramma per il ciclo di vita dell'istanza di un componente. Non è necessario comprendere completamente tutto ciò che sta accadendo in questo momento, ma man mano che impari e costruisci più applicazioni, sarà un riferimento utile.

Diagramma del Ciclo di Vita

Consulta le API sugli Hook del Ciclo di VitaAPI sugli Hook del Ciclo di Vita per i dettagli su tutti gli hook del ciclo di vita e i rispettivi casi d'uso.

Modifica questa pagina su GitHub