Vue.js
Levenscyclushaken

Haken voor Vue 1.x

• init

  Synchroon aangeroepen nadat de instantie is geïnitialiseerd en voorafgaand aan een eerste gegevensobservatie.

• created

  Synchroon aangeroepen nadat het exemplaar is gemaakt. Dit gebeurt vóór $el setup, maar na data observation zijn computed properties , watch/event callbacks en methods ingesteld.

• beforeCompile

  Onmiddellijk voorafgaand aan het compileren van de Vue-instantie.

• compiled

  Onmiddellijk nadat de compilatie is voltooid. Alle directives zijn gekoppeld, maar nog voordat $el beschikbaar is.

• ready

  Treedt op na compilatie en $el zijn voltooid en de instantie wordt voor het eerst in de DOM geïnjecteerd.

• attached

  Treedt op wanneer $el aan de DOM is gekoppeld door een directive of instantie roept $appendTo() .

• detached

  Wordt aangeroepen wanneer $el wordt verwijderd / losgekoppeld van de DOM- of instantiemethode.

• beforeDestroy

  Direct voordat de Vue-instantie wordt vernietigd, maar nog steeds volledig functioneel is.

• destroyed

  Geroepen nadat een exemplaar is vernietigd. Alle bindings en directives zijn al ongebonden geweest en onderliggende exemplaren zijn ook vernietigd.

In een instantie gebruiken

Aangezien alle lifecycle haken in Vue.js zijn slechts functions , kunt u een van hen te plaatsen direct in het geval declaraction.

//JS
new Vue({

    el: '#example',

    data: {
        ...
    },

    methods: {
        ...
    },

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

    ready: function() {
        ...
    }

});

Veel voorkomende valkuilen: toegang tot DOM vanaf de `ready ()` -haak

Een veel voorkomende usecase voor de ready() hook is om toegang te krijgen tot de DOM, bijvoorbeeld om een Javascript-plug-in te initiëren, de afmetingen van een element te krijgen, enz.

Het probleem

Vanwege het asynchrone DOM-updatemechanisme van Vue, is het niet gegarandeerd dat de DOM volledig is bijgewerkt wanneer de hook ready() wordt aangeroepen. Dit resulteert meestal in een fout omdat het element niet is gedefinieerd.

De oplossing

Voor deze situatie kan de instantiemethode $nextTick() helpen. Met deze methode wordt de uitvoering van de geboden callback-functie uitgesteld tot na het volgende vinkje, wat betekent dat deze wordt geactiveerd wanneer alle DOM-updates gegarandeerd zijn voltooid.

Voorbeeld:

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.
    })
  }
}