lifecycle hook created in Vue.js

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.

>> beforeCreate()

beforeMount() Vue JS >>