Il ciclo di vita di una applicazione VUE è legato come primo passo all’ invocazione del costruttore NEW che istanzia un componente. Questo componente viene inizializzato con dei DATI e con l’interazione di EVENTI, dopodichè viene CREATO a tutti gli effetti. Entrerà quindi in gioco il TEMPLATE che si potrà generare direttamente da codice tramite TAG HTML dopodichè il VIRTUAL DOM rimane in attesa dell’ interazione utente. A questo punto il LIFECYCLE è a un bivio: o vengono effettuati dei cambiamenti sull’ interfaccia utente tali da permettere la famosa REATTIVITA’ del FRAMEWORK per l’UPDATE dei DATI oppure il componente è clinicamente morto e destinato al DESTROYED! Se i dati cambiano tutto il nostro componente come una canna di bambù flessibile si adatta alla nuova situazione aggiornando i dati altrimenti alternativa sarebbe un vicolo cieco con il FRAMEWORK che individua i componenti non più necessari per eliminarli. Nel passaggio tra uno step e l’altro definiti HOOK (ganci) sono legati a dei metodi previsti da VUE per la gestione di questi stati. Per esempio nella creazione di un componente faremo uso di certi metodi come loop created, tutti metodi che passeremo al costruttore. Chi ha familiarità con mysql e PHP sa per esempio che i dati vengono generati e creati, inseriti e aggiornati e anche cancellati. Anche VUE contempla queste situazioni usando a seconda dei casi il CREATED, piuttosto che il MOUNTED, invece che l’UPDATED che aggiorna il DOM con il nuovo valore del componente. Sostanzialmente a livello di codice dopo l’inserimento della parte dati avremo un qualcosa di simile:

………………….

methods: {
handleEvent(event) {
console.log(event.target.value);
}
},
created() {
console.log(“istanza creata”)
},
mounted() {
console.log(“istanza inserita nel dom”)
},
updated() {
console.log(“istanza aggiornata”)
},
});

In uno dei prossimi approfondimenti andremo a curiosare sui TEMPLATE in VUE JS