Lifecycle hook mounted

In questa lezione parleremo del lifecycle hook mounted di Vue.js. Questo lifecycle hook è chiamato dopo che un componente è stato montato nel DOM ed è utile quando occorre eseguire operazioni che richiedono l’accesso al DOM o quando si vuole interagire con altri componenti già montati.

Quando utilizzare il lifecycle hook mounted?

Analizziamo alcune situazioni comuni in cui mounted può essere utilizzato:

Manipolazione del DOM: Dato che mounted è chiamato dopo che il componente è stato inserito nel DOM, è il momento ideale per eseguire operazioni che coinvolgono la manipolazione del DOM, come aggiungere eventi o modificare gli attributi degli elementi HTML.

Recupero dei dati: Spesso, è necessario recuperare dati da un’API o da un backend dopo che il componente è stato montato. Utilizzando mounted, è possibile eseguire chiamate API e aggiornare lo stato del componente con i dati ottenuti.

Interazione con altri componenti: Se il componente deve interagire con altri componenti già montati, mounted è il momento giusto per farlo. È possibile accedere ai metodi e ai dati degli altri componenti e stabilire le connessioni necessarie.

Banner Pubblicitario

Esplora l’universo infinito della programmazione con ’50 Algoritmi per imparare JavaScript’, il libro che trasformerà la tua passione per il codice in realtà digitale!

Acquistalo su Amazon

Lifecycle hook mounted di Vue.js – esempio

Facciamo un semplice esempio di utilizzo di mounted. Utilizziamo questo hook per stampare un messaggio di log dopo che il componente è stato montato nel DOM e per cambiare il colore del titolo del componente.

Se facciamo la prova ad utilizzare created o beforeCreate avremo un messaggio di errore, perchè entrambi sono eseguiti prima che il componente venga montato nel DOM, quindi al momento della loro esecuzione non si ha accesso al DOM stesso o agli elementi presenti al suo interno. Se si cerca di manipolare il DOM o interagire con elementi del DOM in questi hook, si otterrà un errore poiché il DOM non è ancora stato creato.

Questo dimostra come mounted sia un ottimo punto per interagire con il DOM e aggiungere funzionalità al componente dopo che è stato renderizzato.

Di seguito ecco un esempio di un componente che fa uso di Lifecycle hook mounted di Vue.js:

<template>
    <div>
      <h1>{{ message }}</h1>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        message: 'Ciao da Coding Creativo!' // Messaggio di esempio
      };
    },
    mounted() {
      // Eseguiamo operazioni dopo che il componente è stato montato nel DOM
      console.log('Il componente è stato montato nel DOM.');
      // Esempio di manipolazione del DOM
      document.querySelector('h1').style.color = 'orange';
    }
  };
  </script>

Banner pubblicitario

Conclusioni

In questo articolo abbiamo parlato del lifecycle hook mounted di Vue.js. Ricordiamo dunque che mounted è utilizzando come momento ideale per interagire con il DOM e gli altri componenti, mentre created e beforeCreate sono utilizzati principalmente per l’inizializzazione dei dati e la configurazione del componente stesso.

Chiaramente il corretto utilizzo dei lifecycle hooks in Vue.js è fondamentale per garantire il corretto funzionamento e la gestione efficiente dei componenti. Comprendere il momento esatto in cui vengono eseguiti questi hooks e quali operazioni sono appropriate in ciascuno di essi è essenziale per sviluppare applicazioni Vue.js stabili e performanti.

Sia mounted, created, beforeCreate e gli altri lifecycle hook forniscono una potente flessibilità per gestire il ciclo di vita dei componenti in Vue.js, consentendo loro di scrivere codice pulito, organizzato e facilmente manutenibile. La padronanza di questi concetti è dunque cruciale per costruire applicazioni Vue.js di successo, in grado di fornire un’esperienza utente ottimale e scalabile! Seguitemi per altri tutorial sull’argomento, nella prossima lezione parleremo di beforeUpdate.

>> beforeMount()

beforeUpdate() >>