Lifecycle hooks in Vue

In questa lezione parliamo dei lifecycle hooks in Vue.js che sono metodi speciali che possono essere definiti all’interno di un componente. Gli hooks sono eseguiti automaticamente in diverse fasi del ciclo di vita del componente stesso. Queste fasi includono la creazione, il montaggio, l’aggiornamento e la distruzione del componente. Utilizzando i lifecycle hooks in Vue.js, è possibile eseguire azioni specifiche in momenti precisi del ciclo di vita del componente, consentendo un controllo più preciso e una gestione ottimale dello stato e del comportamento dell’applicazione.

Prima di andare a parlare in dettaglio degli hooks su Vue.js diamo la definizione di base.

Lifecycle hooks in Vue – definizione

In programmazione, un “hook” è un punto di estensione o di personalizzazione che permette a un’applicazione di interagire con il comportamento di un sistema esterno o di un’altra parte del codice. Gli hooks sono strumenti utilizzati per modificare il flusso di esecuzione del programma o per eseguire azioni specifiche in risposta a determinati eventi.

Nei framework e nelle librerie software, gli hooks sono spesso utilizzati per fornire agli sviluppatori un modo per estendere o modificare il comportamento predefinito del sistema. Ad esempio, in molti framework front-end come React.js o Vue.js, sono disponibili i cosiddetti “lifecycle hooks“, che consentono agli sviluppatori di eseguire azioni in determinati momenti del ciclo di vita di un componente.

Gli hooks possono essere utilizzati anche in altri contesti, come nei sistemi di gestione dello stato, nei framework di sviluppo web o nei backend, per eseguire operazioni specifiche in risposta a determinati eventi o condizioni.

Quindi, in definitiva, un hook è un meccanismo utilizzato nella programmazione per estendere le funzionalità di un’applicazione, permettendo agli sviluppatori di interagire con il codice in modi specifici e ben definiti.

In Vue 3, i lifecycle hooks sono gli stessi di Vue 2, con alcune sostituzioni/aggiunte e con una differenza importante: l’introduzione di Composition API. La Composition API offre una nuova modalità di organizzazione del codice all’interno dei componenti, consentendo di suddividere la logica in blocchi di composizione riutilizzabili chiamati “composition functions”.

Ma, la maggior parte dei lifecycle hooks di base rimane la stessa anche in Vue 3.

Lifecycle hooks

Di seguito ecco in dettaglio i lifecycle hooks di base:

beforeCreate: Questo hook viene chiamato prima che il componente venga creato. In questa fase, le proprietà del componente e i metodi non sono ancora stati inizializzati.
created: viene chiamato subito dopo la creazione del componente. In questo punto, il componente è stato inizializzato, ma non è ancora stato montato nel DOM. È il momento ideale per inizializzare i dati del componente o eseguire chiamate a API esterne.
beforeMount: Questo hook viene eseguito prima che il componente venga montato nel DOM. È utile per eseguire azioni prima che il rendering avvenga, come ad esempio la manipolazione dei dati o l’aggiunta di eventi.
mounted: viene chiamato dopo che il componente è stato montato nel DOM. È il momento in cui il componente è visibile e accessibile nel DOM. È comunemente utilizzato per eseguire operazioni che richiedono l’accesso al DOM, come l’inizializzazione di librerie esterne o l’avvio di animazioni.
beforeUpdate: Questo hook viene chiamato prima che il componente venga aggiornato, sia a causa di un cambiamento nei dati del componente o di una forzatura di aggiornamento. È utile per eseguire azioni prima che avvenga l’aggiornamento, come la memorizzazione temporanea di valori.
updated: viene chiamato dopo che il componente è stato aggiornato nel DOM a seguito di un cambiamento nei dati del componente. È il momento in cui è possibile eseguire azioni dopo l’aggiornamento del DOM, come l’interazione con elementi appena aggiornati.
beforeDestroy (in Vue 2): Questo hook viene chiamato prima che il componente venga distrutto. È utile per eseguire azioni di “pulizia” prima che il componente venga rimosso, come la rimozione di eventi o la cancellazione di timeout.
destroyed (in Vue 2): viene chiamato dopo che il componente è stato distrutto. In questa fase, il componente non è più accessibile e tutte le risorse associate possono essere rilasciate.

Lifecycle hooks aggiunti in Vue 3

In Vue 3, sono stati poi introdotti alcuni nuovi lifecycle hooks relativi alla fase di smontaggio dei componenti: beforeUnmount e unmounted. Questi hooks offrono agli sviluppatori un maggiore controllo sulle operazioni da eseguire prima e dopo lo smontaggio di un componente dal DOM.

I nuovi lifecycle hooks in Vue 3 sono:

beforeUnmount: Il lifecycle hook beforeUnmount viene chiamato immediatamente prima che un componente venga rimosso dal DOM. Questo hook è utile per eseguire operazioni di “pulizia” o di rilascio di risorse prima che il componente venga smontato. Ad esempio, potrebbe essere utilizzato per rimuovere eventi o interruzioni asincrone precedentemente registrati durante il montaggio del componente.
unmounted: Il lifecycle hook unmounted viene chiamato dopo che un componente è stato rimosso dal DOM. Questo hook fornisce un punto finale per eseguire operazioni finali o di “pulizia” dopo lo smontaggio del componente. Può essere utilizzato per rilasciare risorse aggiuntive o per eseguire azioni finali prima che il componente venga distrutto completamente.

Conclusioni

In questa lezione abbiamo parlato dei lifecycle hooks in Vue js, che sono un aspetto fondamentale del framework che consente agli sviluppatori di interagire con il ciclo di vita dei componenti. Sia in Vue 2 che in Vue 3, i lifecycle hooks offrono punti chiave in cui è possibile eseguire azioni specifiche durante la creazione, l’aggiornamento e lo smontaggio dei componenti.

In Vue 3, sono stati introdotti due nuovi lifecycle hooks, beforeUnmount e unmounted, che offrono maggiore controllo e flessibilità durante la fase di smontaggio dei componenti. Questi hooks consentono agli sviluppatori di eseguire operazioni di pulizia o di rilascio di risorse prima e dopo lo smontaggio dei componenti, migliorando la gestione complessiva del ciclo di vita dell’applicazione.

Quindi, in definitiva, i lifecycle hooks in Vue.js sono uno strumento potente che consente agli sviluppatori di scrivere codice più pulito, modulare e reattivo, garantendo al contempo una migliore gestione dello stato e del comportamento dei componenti dell’applicazione. La comprensione di questi hooks è essenziale per diventare un programmatore Vue.js efficace e produttivo.