Vue.js
Lifecycle Hooks

Ganci per Vue 1.x

• init

  Chiamato in modo sincrono dopo l'inizializzazione dell'istanza e prima di qualsiasi osservazione iniziale dei dati.

• created

  Chiamato in modo sincrono dopo la creazione dell'istanza. Ciò si verifica prima di $el setup, ma dopo data observation , sono state configurate computed properties , watch/event callbacks e methods .

• beforeCompile

  Immediatamente prima della compilazione dell'istanza Vue.

• compiled

  Subito dopo la compilazione è stata completata. Tutte le directives sono collegate ma ancora prima che $el sia disponibile.

• ready

  Si verifica dopo la compilazione e $el sono completi e l'istanza viene iniettata nel DOM per la prima volta.

• attached

  Si verifica quando $el è collegato al DOM da una directive o un'istanza chiama $appendTo() .

• detached

  Chiamato quando $el viene rimosso / staccato dal DOM o dal metodo di istanza.

• beforeDestroy

  Immediatamente prima che l'istanza di Vue venga distrutta, ma è ancora completamente funzionante.

• destroyed

  Chiamato dopo che un'istanza è stata distrutta. Tutti i bindings e le directives sono già stati non vincolati e anche le istanze secondarie sono state distrutte.

Uso in un'istanza

Poiché tutti gli hook del ciclo di vita in Vue.js sono solo functions , è possibile Vue.js uno direttamente nell'istanza dichiaraction.

//JS
new Vue({

    el: '#example',

    data: {
        ...
    },

    methods: {
        ...
    },

    //LIFECYCLE HOOK HANDLING
    created: function() {
        ...
    },

    ready: function() {
        ...
    }

});

Common Trappole: Accesso al DOM dal hook `ready ()`

Un usecase comune per l'hook ready() è quello di accedere al DOM, ad esempio per avviare un plugin Javascript, ottenere le dimensioni di un elemento, ecc.

Il problema

A causa del meccanismo di aggiornamento DOM asincrono di Vue, non è garantito che il DOM sia stato completamente aggiornato quando viene chiamato l'hook ready() . Di solito ciò genera un errore perché l'elemento non è definito.

La soluzione

Per questa situazione, il metodo di istanza $nextTick() può essere d'aiuto. Questo metodo rimanda l'esecuzione della funzione di callback fornita fino a dopo il segno di spunta successivo, il che significa che viene attivato quando tutti gli aggiornamenti DOM sono garantiti per essere completato.

Esempio:

module.exports {
  ready: function () {
    $('.cool-input').initiateCoolPlugin() //fails, because element is not in DOM yet.
    
    this.$nextTick(function() {
      $('.cool-input').initiateCoolPlugin() // this will work because it will be executed after the DOM update.
    })
  }
}