In questa lezione parleremo di lifecycle hook beforeMount di Vue.js. Questo metodo è uno dei lifecycle hooks che viene chiamato prima che il componente venga montato nel DOM, dunque permette di eseguire operazioni di preparazione o configurazione prima che il componente sia effettivamente visualizzato nella pagina web.
Quindi, possiamo affermare che beforeMount è un hook utile per eseguire operazioni di preparazione prima del rendering del componente. Può essere utilizzato per eseguire operazioni di inizializzazione, configurazione del DOM o manipolazione dei dati, garantendo che il componente sia pronto per essere reso visibile nella pagina web.
Lifecycle hook beforeMount – caratteristiche principali
Ecco alcune caratteristiche principali del metodo beforeMount di Vue.js:
Momento di chiamata: beforeMount è chiamato subito prima che il rendering del componente inizi e prima che il componente sia effettivamente montato nel DOM. Questo significa che è il momento perfetto per eseguire operazioni di inizializzazione che devono essere completate prima che il componente sia reso visibile agli utenti.
Accesso al DOM: A differenza di alcuni hook che vengono chiamati prima che il DOM sia stato completamente generato, come beforeCreate e created, beforeMount offre l’accesso al DOM del componente. Questo può essere utile se si desidera eseguire operazioni che coinvolgono il DOM prima che il componente sia visualizzato.
Manipolazione dei dati: Durante l’esecuzione di beforeMount, i dati del componente sono già stati inizializzati e sono disponibili per essere utilizzati. Questo hook può quindi essere utilizzato per eseguire operazioni che coinvolgono la manipolazione dei dati del componente prima che venga montato nel DOM.
Aggiornamenti del componente: Se il componente viene aggiornato in seguito a cambiamenti nei dati o ad altri eventi, beforeMount non verrà richiamato. Questo hook è eseguito solo una volta, prima che il componente venga montato per la prima volta.
Differenza con il lifecycle hook created
La principale differenza tra il lifecycle hook beforeMount e created riguarda il momento della loro chiamata nel ciclo di vita del componente Vue.js. Difatti created è chiamato subito dopo che l’istanza del componente è stata completamente inizializzata, ma prima che il componente venga montato nel DOM. Mentre beforeMount è chiamato prima che il componente venga montato nel DOM.
Entrambi gli hook offrono dunque un modo per eseguire operazioni di inizializzazione, ma in momenti diversi all’interno del ciclo di vita del componente.
Facciamo un esempio dove utilizziamo il lifecycle hook created per eseguire le seguenti azioni:
Stampiamo un messaggio di log per indicare che created è stato eseguito.
Aggiorniamo il valore della variabile message con il testo “Messaggio aggiornato nel created”.
Stampiamo il valore attuale della variabile message tramite un messaggio di log.
Dopo anche nel lifecycle hook beforeMount eseguiamo queste azioni:
Stampiamo un messaggio di log per indicare che beforeMount è stato eseguito.
Aggiorniamo il valore della variabile message con il testo “Messaggio aggiornato dal beforeMount”.
Stampiamo il valore attuale della variabile message tramite un messaggio di log.
Se andiamo a vedere l’ordine vediamo subito che created è stato eseguito per primo (chiaramente non dipende dall’ordine in cui gli hook sono scritti nel codice).
Ecco come si presenta il componente dell’esempio sopra descritto:
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: '' // Variabile per memorizzare il messaggio
};
},
created() {
console.log('created è stato eseguito');
this.message = 'Messaggio aggiornato nel created';
console.log('Il messaggio nel created è:', this.message);
},
beforeMount() {
console.log('beforeMount è stato eseguito');
this.message = 'Messaggio aggiornato dal beforeMount';
console.log('Il messaggio nel beforeMount è:', this.message);
}
};
</script>
Conclusioni
In questa lezione abbiamo parlato del lifecycle hook beforeMount di Vue.js. Questo hook viene chiamato prima che il componente venga montato nel DOM, consentendo di eseguire operazioni di preparazione o configurazione prima del rendering effettivo del componente.
Durante il lifecycle hook beforeMount, è possibile eseguire azioni come la manipolazione del DOM, la configurazione di eventi o l’inizializzazione di variabili di stato. Questo momento è particolarmente utile per effettuare operazioni che devono essere eseguite prima che il componente sia visibile nella pagina, garantendo una transizione fluida ed un’esperienza utente ottimale.
Inoltre, comprendere il funzionamento e l’utilizzo corretto di beforeMount può contribuire a migliorare la struttura e le prestazioni delle applicazioni Vue.js, consentendo agli sviluppatori di ottimizzare il codice e gestire meglio il ciclo di vita dei componenti.
In questa lezione parleremo del lifecycle hook created in Vue.js. Questo hook è uno dei primi ad essere eseguiti durante il ciclo di vita di un componente Vue.
lifecycle hook created in Vue.js – quando è chiamato?
Il lifecycle hook created in Vue.js viene chiamato subito dopo che l’istanza del componente è stata creata e tutte le sue proprietà reattive sono state inizializzate. Questo hook è particolarmente utile per eseguire operazioni di inizializzazione che richiedono accesso alle proprietà del componente, ma che non dipendono ancora dal rendering del DOM.
N.B. L’hook created è chiamato dopo che le opzioni del componente, come data, methods, ecc., sono state valutate e inizializzate, ma prima che l’istanza del componente sia completamente inizializzata e montata nel DOM. Questo significa che all’interno dell’hook created le proprietà e i metodi del componente sono accessibili e utilizzabili, ma il rendering del DOM non è ancora stato completato. L’hook created inolte è chiamato anche dopo beforeCreate. Ciò vuol dire che durante il ciclo di vita del componente Vue.js, beforeCreate è eseguito prima che l’istanza del componente sia completamente inizializzata e prima che le opzioni del componente siano valutate, mentre created viene eseguito subito dopo che le opzioni del componente sono state valutate e inizializzate.
Quando utilizziamo created?
Ecco alcune situazioni in cui potremmo voler utilizzare il metodo created():
Inizializzazione delle variabili di stato: L’hook created ci consente di inizializzare le variabili di stato del componente. Quindi si imposta lo stato iniziale, assegnando valori predefiniti alle variabili o recuperandoli da fonti esterne come le API.
Recupero dei dati tramite chiamate API: Dal momento che l’hook created è eseguito subito dopo la creazione del componente, è il momento perfetto per effettuare chiamate API e recuperare i dati necessari. All’interno di questo hook, possiamo gestire la logica per il recupero dei dati e assegnare i risultati alle variabili del componente.
Configurazione degli osservatori ed eventi: L’hook created fornisce anche l’opportunità di configurare osservatori per monitorare i cambiamenti nelle variabili di stato o registrare eventi che devono essere gestiti dal componente. È il momento giusto per impostare questi aspetti della logica del componente.
Precisazioni
Innanzitutto ricordiamo che il metodo data() è eseguito prima del metodo beforeCreate() e di created(). Questo significa che se i dati sono definiti direttamente in data(), saranno disponibili non appena il componente viene creato. Non c’è bisogno di aspettare l’esecuzione del metodo created().
lifecycle hook created in Vue.js – esempio
In questo esempio utilizzaimo l’hook created per eseguire un’operazione di inizializzazione, simulando una richiesta asincrona per recuperare i dati dell’utente da un’API esterna. Una volta ottenuti i dati, li assegniamo alla variabile user del componente, che potrebbe essere utilizzata successivamente nel template per visualizzare le informazioni dell’utente.
Ecco come si presenta il component PersonaComponent:
<template>
<div>
<h2>Informazioni Utente</h2>
<div v-if="isLoading">Caricamento in corso...</div>
<div v-else>
<p><strong>ID:</strong> {{ user.id }}</p>
<p><strong>Nome:</strong> {{ user.name }}</p>
<p><strong>Email:</strong> {{ user.email }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'PersonaComponent',
data() {
return {
isLoading: true,
user: null
};
},
created() {
// Simuliamo una richiesta asincrona per recuperare i dati dell'utente
setTimeout(() => {
// Dati simulati dell'utente ottenuti dall'API esterna
const userData = {
id: 1,
name: 'Paperina',
email: 'paperina@example.com'
};
// Assegniamo i dati dell'utente alla variabile user del componente
this.user = userData;
// Indichiamo che il caricamento è completo
this.isLoading = false;
}, 1000); // Simuliamo un ritardo di 1 secondo per la richiesta
}
}
</script>
In questo componente dunque, mostriamo le informazioni dell’utente una volta che i dati sono stati recuperati con successo dall’API esterna. Durante il caricamento dei dati, si visualizza un messaggio di “Caricamento in corso…”. Una volta completato il caricamento, mostriamo le informazioni dell’utente come ID, nome ed email.
N.B. In questo esempio si potrebbe anche usare beforeCreate per inizializzare i dati del componente prima che venga eseguita la creazione dell’istanza del componente. Ma, è importante notare che beforeCreate è chiamato prima che le opzioni del componente (come data, methods, ecc.) siano valutate e inizializzate. Pertanto, se si desidera accedere a queste opzioni durante l’inizializzazione dei dati, created potrebbe essere più appropriato.
Quindi beforeCreate è più adatto per l’esecuzione di operazioni di inizializzazione che non dipendono dalle opzioni del componente, mentre created è più appropriato se si desidera accedere e utilizzare le opzioni del componente durante l’inizializzazione dei dati.
Conclusioni
In questa lezione abbiamo parlato di created, un lifecycle hook dei componenti in Vue.js.
Il metodo created fornisce una finestra temporale subito dopo che l’istanza del componente è stata completamente inizializzata. Durante questo momento, il componente ha accesso sia alle opzioni di configurazione del componente che alle sue proprietà e ai suoi metodi.
Questo metodo è particolarmente utile per eseguire operazioni di inizializzazione che richiedono l’accesso alle proprietà del componente stesso, come ad esempio il recupero di dati da un’API esterna o l’assegnazione di valori predefiniti alle variabili del componente.
L’utilizzo di created permette di configurare il componente in modo tale che sia pronto per l’uso una volta che è stato completamente creato e inizializzato. È uno strumento potente che consente di garantire che il componente sia in uno stato coerente e pronto per l’interazione dell’utente.
Quindi, il metodo created è un componente essenziale nel ciclo di vita di Vue.js che permette di eseguire operazioni di inizializzazione e di preparazione del componente per l’utilizzo, garantendo una corretta configurazione.
In questa lezione parleremo di beforeCreate, un lifecycle hook dei componenti in Vue.js. Gli hooks del ciclo di vita sono metodi predefiniti che sono chiamati in momenti specifici durante il ciclo di vita di un componente Vue. Ricordiamo che i lifecycle hooks consentono di eseguire codice in risposta a eventi come la creazione, l’aggiornamento o la distruzione di un componente.
lifecycle hook beforeCreate in Vue.js – quando è chiamato?
L’hook beforeCreate() viene chiamato prima che l’istanza del componente sia completamente inizializzata e pronta per l’uso. È il primo hook chiamato nel ciclo di vita del componente. Questo significa che il codice all’interno di beforeCreate() viene eseguito prima che il componente abbia accesso ai dati, alle props o ad altre opzioni dichiarate, rendendolo un buon punto di ingresso per eseguire operazioni di inizializzazione esterne o per configurare eventi globali o plugin.
N.B. Il metodo beforeCreate() viene chiamato prima che l’istanza del componente sia completamente inizializzata, ma dopo che le opzioni del componente (come data, methods, ecc.) sono state valutate! beforeCreate è il primo hook del ciclo di vita del componente Vue.js ad essere chiamato
Quando utilizziamo beforeCreate?
Ecco alcune situazioni in cui potremmo voler utilizzare il metodo beforeCreate():
Inizializzazione di variabili esterne: Il metodo beforeCreate() offre un punto di ingresso ideale per inizializzare variabili o proprietà che non sono strettamente legate allo stato interno del componente. Questo potrebbe includere l’acquisizione di dati da un’API esterna o l’inizializzazione di un’istanza di una classe di utilità, preparando il terreno per l’utilizzo all’interno del componente.
Registrazione di eventi globali o plugin: Utilizzando beforeCreate(), è possibile registrare eventi globali o configurare plugin che devono essere disponibili per tutti i componenti dell’applicazione. Questo garantisce che tali configurazioni siano eseguite in fase di inizializzazione del componente, garantendo la loro disponibilità prima che il componente stesso abbia accesso ad esse.
Accesso a opzioni di configurazione esterne: Se il componente necessita di accedere a opzioni di configurazione esterne, come parametri passati tramite props o opzioni globali definite dall’applicazione, il metodo beforeCreate() offre il momento perfetto per accedervi e inizializzare il componente in base a queste opzioni. Questo assicura una corretta configurazione del componente fin dall’inizio del suo ciclo di vita.
Precisazioni
Innanzitutto ricordiamo che il metodo data() viene eseguito prima del metodo beforeCreate(). Questo significa che se i dati sono definiti direttamente in data(), saranno disponibili non appena il componente viene creato. Non c’è bisogno di aspettare l’esecuzione del metodo beforeCreate(). Ovvero se volessi subito visualizzare dei prodotti li inserisco su data in questo modo ad esempio:
export default {
data() {
return {
items: [
{ id: 1, name: 'Prodotto 1' },
{ id: 2, name: 'Prodotto 2' },
{ id: 3, name: 'Prodotto 3' }
]
};
},
beforeCreate() {
// Nessuna richiesta asincrona simulata qui
// I dati vengono assegnati direttamente alla variabile nel data()
}
}
In definitiva, se i dati sono statici e non richiedono operazioni aggiuntive o dipendono da altri fattori esterni, definirli direttamente in data() è il modo più semplice e appropriato. Se, invece, ci sono operazioni di inizializzazione o configurazioni specifiche da eseguire, beforeCreate() può essere una buona opzione.
lifecycle hook beforeCreate in Vue.js – esempio
Quindi se vogliamo una situazione in cui i dati dei prodotti, ad esmepio, devono essere ottenuti in modo asincrono prima di essere visualizzati nel componente, possiamo ad esempio utilizzare il metodo beforeCreate.
Facciamo un esempio dove nel metodo beforeCreate(), simuliamo una richiesta asincrona utilizzando setTimeout, e dopo un ritardo di 1 secondo otteniamo dei dati simulati dall’API esterna. Successivamente, assegniamo questi dati alla variabile items del componente. Infine, nella parte del template, iteriamo attraverso gli elementi di items utilizzando una direttiva v-for per visualizzare i nomi dei prodotti nella lista.
Ecco come ho sviluppo il componente:
<template>
<div>
<h2>Prodotti</h2>
<ul>
<li v-for="prodotto in prodotti" :key="prodotto.id">{{ prodotto.name }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'ProdottiComponent',
data() {
return {
prodotti: [] // Variabile per memorizzare i dati recuperati dall'API
};
},
beforeCreate() {
// Simuliamo una richiesta asincrona
setTimeout(() => {
// Dati simulati ottenuti dall'API esterna
const data = [
{ id: 1, name: 'Prodotto 1' },
{ id: 2, name: 'Prodotto 2' },
{ id: 3, name: 'Prodotto 3' }
];
this.prodotti = data;
}, 1000); // Simuliamo un ritardo di 1 secondo per la richiesta
}
}
</script>
Il nostro obiettivo è quello di assicurarci che i dati siano disponibili prima che il componente venga completamente creato e renderizzato. Questo è importante perché vogliamo che la nostra lista di prodotti sia popolata correttamente quando il componente viene visualizzato nell’interfaccia utente.
Utilizzando beforeCreate() dunque, possiamo eseguire le operazioni di inizializzazione necessarie prima che il componente sia completamente pronto per l’utilizzo. In questo caso, simuliamo il caricamento asincrono dei dati e li assegniamo alla variabile prodotti all’interno di beforeCreate(), in modo che i prodotti siano pronti per essere visualizzati quando il componente viene renderizzato.
Conclusioni
In questa lezione abbiamo parlato di beforeCreate un lifecycle hook dei componenti in Vue.js.
Questo metodo offre una finestra temporale per eseguire operazioni di inizializzazione prima che il componente sia completamente creato e reso nel DOM. Dunque possiamo configurare lo stato del componente, effettuare chiamate API, inizializzare variabili e altre attività necessarie per preparare il componente prima della sua visualizzazione.
È importante ricordare che il beforeCreate viene eseguito prima che il componente abbia accesso a molte delle sue proprietà e opzioni, quindi è necessario usarlo con attenzione e comprendere il momento in cui si attiva nel ciclo di vita del componente.
Quindi, il metodo beforeCreate in Vue JS è uno strumento molto potente che consente di gestire il processo di inizializzazione dei componenti Vue.js in modo efficiente e pulito.
In questa lezione parleremo deli slot di Vue.js, partendo dalla definizione di slot nel contesto di Vue JS.
Definizione tecnica 🛠️
In termini tecnici, uno slot è un’API che consente ai componenti genitori di inserire del contenuto all’interno dei componenti figlio in modo dinamico. Ciò significa che si può definire zone specifiche all’interno dei componenti figlio in cui il contenuto verrà visualizzato in base al contesto in cui è utilizzato il componente.
Definizione creativa 🌟
🚪 Immaginate gli slot di Vue.js come porte segrete all’interno dei nostri componenti. Ogni componente ha queste “porte” nascoste, che permettono di inserire contenuti personalizzati o dinamici al loro interno.
🔑 Utilizzando gli slot, possiamo aprire queste porte e inserire al loro interno qualsiasi tipo di contenuto, come testo, immagini, altri componenti Vue, o addirittura logica di rendering personalizzata.
💡 Questa flessibilità è ciò che rende Vue.js così potente nel creare interfacce utente dinamiche e coinvolgenti. Possiamo adattare i nostri componenti per rispondere dinamicamente alle esigenze degli utenti, inserendo contenuti diversi o modificando il loro aspetto in base al contesto in cui vengono utilizzati.
slot di Vue.js come usarli
Facciamo degli esempi pratici d’utilizzo degli slor in Vue JS.
Supponiamo di avere un componente chiamato “CardComponent” che visualizza diverse informazioni che include un titolo e un contenuto principale. Tuttavia, vogliamo rendere il componente flessibile in modo che possa ospitare diversi tipi di contenuti personalizzati.
Potremmo allora definire il nostro componente CardComponent in modo da renderlo riutilizzabile e personalizzabile. Inseriamo nel template una struttura di base che include un’intestazione, un corpo e un piè di pagina. Tuttavia, potremmo voler personalizzare il contenuto all’interno di questo componente in base al contesto in cui viene utilizzato.
<!-- Card.vue -->
<template>
<div class="card">
<h2>{{ title }}</h2>
<div class="content">
<slot></slot> <!-- Slot per il contenuto personalizzato -->
</div>
</div>
</template>
<script>
export default {
name: 'CardComponent',
props: {
title: String // Proprietà per il titolo della carta
}
}
</script>
<style scoped>
.card {
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
}
/* altri stili */
</style>
In questo modo possiamo utilizzare il nostro componente “CardComponent” in qualsiasi parte della nostra applicazione Vue.js e inserire al suo interno contenuti personalizzati utilizzando lo slot.
Ecco un esempio di utilizzo:
<template>
<div>
<!-- Utilizzo del componente Card con un titolo personalizzato e un contenuto personalizzato -->
<CardComponent title="Il mio titolo personalizzato">
<p>Questo è il mio contenuto personalizzato all'interno della card.</p>
</CardComponent>
<CardComponent title="Il mio secondo titolo personalizzato">
<p>Questo è il mio secondo contenuto personalizzato all'interno della card.</p>
</CardComponent>
<CardComponent title="Il mio terzo titolo personalizzato senza contenuto">
</CardComponent>
</div>
</template>
<script>
import CardComponent from './CardComponent.vue';
export default {
components: {
CardComponent,
}
}
</script>
La tecnica degli slot di Vue.js è molto utilizzata. Immaginiamo infatti di avere un componente “CardComponent” riutilizzabile che mostra informazioni su un prodotto, come il nome, la descrizione e il prezzo. Questo componente potrebbe avere una struttura di base che include un’intestazione, un corpo e un piè di pagina. Tuttavia, potremmo voler personalizzare il contenuto all’interno di questo componente in base al contesto in cui viene utilizzato.
Ecco dove entrano in gioco gli slot: possiamo definire uno slot all’interno del nostro componente “CardComponent” per il contenuto del corpo, consentendo al componente genitore di inserire dinamicamente il contenuto desiderato. Ad esempio, possiamo inserire un titolo, una descrizione e un pulsante di azione diversi per ogni carta, senza dover creare un componente separato per ciascuna variante.
Conclusioni
In questa lezione abbiamo imparato ad utilizzare gli slot di Vue.js. Abbiamo visto come gli slot consentono di creare componenti che possono adattarsi alle diverse esigenze dell’utente o del contesto in cui vengono utilizzati. Gli slot si possono sono come finestre aperte che permettono di guardare dentro i componenti e personalizzarli in base alle nostre esigenze.
Nelle prossime lezioni approfondiremo l’utilizzo degli slot in Vue.js insieme ad altri interessanti argomenti.
In questa lezione creiamo un esercizio per gestire le tabs in Vue.js. Le “tabs” sono solitamente utilizzati per creare interfacce utente con più schede, dove ogni scheda contiene un insieme di contenuti separati. Può essere utile ad esempio per organizzare e visualizzare diverse sezioni di informazioni o funzionalità all’interno di un’applicazione web.
Ci sono diverse librerie e approcci per creare tabs in Vue.js, ma vediamo un esempio di come poterli implementare usando i componenti Vue.js.
Esempio di tabs in Vue.js
In questo primo esempio creiamo un unico componente per la gestione delle tabs. Realizziamo un template, con due button che, quando cliccati, cambiano il valore di activeTab rispettivamente a 'tab1' e 'tab2'. Poi in un div insieramo due paragrafi che costituiscono il contenuto delle due tabs.
A questi paragrafi ho assegnato una direttiva :class che imposta la classe CSS 'active' in base a quale tab è attivo. In questo modo, quando activeTab è uguale a 'tab1', il primo paragrafo riceverà la classe 'active' e quindi sarà visualizzato. Allo stesso modo, quando activeTab è uguale a 'tab2', il secondo paragrafo verrà visualizzato.
Dopo nella sezione <script>, definiamo il componente Vue.js e utilizziamo la proprietà data per inizializzare activeTab con il valore 'tab1', in modo che il primo tab sia attivo di default quando la pagina viene caricata.
In questo secondo esempio utilizziamo più componenti per realizzare le tabs.
Dapprima creiamo il componente TabItem dove inseriamo <slot></slot> che rappresenta un punto di inserimento per il contenuto del componente che viene fornito quando il componente viene utilizzato. Quando usiamo questo componente (<TabItem>), qualsiasi cosa inseriamo tra i tag <TabItem></TabItem> verrà inserito al posto dello slot <slot></slot>.
Usiamo la direttiva v-show per controllare la visibilità del <div> basandoci sul valore della prop isActive. Se isActive è true, il <div> sarà visibile; altrimenti, se è false, il <div> sarà nascosto.
TabItem
Ecco dunque come si presenta il componente TabItem.vue
Contiuiamo l’esempio sulle tabs in Vue.js implementando adesso il sistema di tabs. Inseriamo innanzitutto nel template due sezioni principali:
Una sezione per visualizzare le tabs, dove viene usato un ciclo v-for per iterare su ogni tab nell’array tabs. Ogni tab è rappresentata da un elemento <li> all’interno di una lista non ordinata <ul>.
Una sezione per visualizzare il contenuto della tab attiva, utilizzando uno slot per inserire il contenuto della tab corrente.
Dopo nello script su data() definiamo le variabili, nel nostro caso activeTab, che tiene traccia dell’indice della tab attualmente attiva (partiamo di default dalla prima tab).
Poi inseriamo il metodo activateTab(index) che viene chiamato quando si fa clic su una tab. Questo metodo imposta l’indice della tab attiva ed emette un evento tab-clicked con l’indice della tab cliccata utilizzando this.$emit(). Questo permette ad altri componenti di reagire al clic sulla tab.
Diamo poi uno stile CSS a piacere.
Ecco dunque come si presenta il componente TabsComponent.
Terminiamo di realizzare le tabs in Vue.js creando il componente genitore che implementa il sistema di tabs.
Nel template di questo componente dunque inseriamo TabsComponent che rappresenta il container delle tabs. Viene passata la prop tabs che contiene l’array di tabs da visualizzare e la prop activeTab che indica quale tab è attualmente attiva. Viene anche ascoltato l’evento tab-clicked per aggiornare l’indice della tab attiva.
Poi inseriamo i componenti TabItem che rappresentano ogni singola tab. Utilizziamo un attributo dinamico :is-active per determinare se la tab è attiva o meno. Inseriamo poi il contenuto della tab direttamente all’interno del componente TabItem.
Possiamo migliorare ulteriormente il nostro sistema di tabs in Vue.js. Infatti potremmo popolare dinamicamente let abs attraverso un ciclo for ed utilizzando un array di oggetti come questo:
Quindi apportiamo le modifiche al componente TabsContainer, dove nel template inseriamo TabsComponent che rappresenta il container delle tabs a cui passiamo la prop tabs che contiene l’array di tabs da visualizzare.
In questa lezione abbiamo sviluppato degli esempi per le tabs in Vue.js che ci hanno fornito un’ottima base per comprendere i concetti fondamentali di Vue.js e come utilizzarli per creare interfacce utente interattive e reattive. Continuate a seguire gli articoli di questo blog per scoprire altri interessanti argomenti.
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.
Lifecycle hooks in Vue
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.
Commenti recenti