Vue.js
Lebenszyklus-Haken

Haken für Vue 1.x

• init

  Wird synchron aufgerufen, nachdem die Instanz initialisiert wurde und bevor eine erste Datenbeobachtung erfolgt.

• created

  Wird synchron aufgerufen, nachdem die Instanz erstellt wurde. Dies tritt vor dem $el Setup auf, aber nach data observation wurden computed properties , watch/event callbacks und methods .

• beforeCompile

  Unmittelbar vor dem Kompilieren der Vue-Instanz.

• compiled

  Sofort nach Abschluss der Kompilierung. Alle directives sind verknüpft, aber noch bevor $el verfügbar ist.

• ready

  Tritt nach der Kompilierung auf und $el ist abgeschlossen und die Instanz wird zum ersten Mal in das DOM eingefügt.

• attached

  Tritt auf, wenn $el durch eine directive an das DOM angehängt wird oder die Instanz $appendTo() .

• detached

  Wird aufgerufen, wenn $el von der DOM- oder Instanzmethode entfernt / getrennt wird.

• beforeDestroy

  Unmittelbar bevor die Vue-Instanz zerstört wird, ist sie dennoch voll funktionsfähig.

• destroyed

  Wird aufgerufen, nachdem eine Instanz zerstört wurde. Alle bindings und directives wurden bereits ungebunden und untergeordnete Instanzen wurden ebenfalls zerstört.

Verwendung in einer Instanz

Da alle Lebenszyklus-Hooks in Vue.js nur functions , können Sie alle direkt in der Instanzdeklaration platzieren.

//JS
new Vue({

    el: '#example',

    data: {
        ...
    },

    methods: {
        ...
    },

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

    ready: function() {
        ...
    }

});

Häufige Fallstricke: Zugriff auf DOM über den `ready ()` - Haken

Eine häufige Verwendung des ready() Hooks ist der Zugriff auf das DOM, z. B. um ein Javascript-Plugin zu initiieren, die Dimensionen eines Elements zu ermitteln usw.

Das Problem

Aufgrund des asynchronen DOM-Aktualisierungsmechanismus von Vue kann nicht garantiert werden, dass das DOM beim Aufruf des ready() -Hooks vollständig aktualisiert wurde. Dies führt normalerweise zu einem Fehler, da das Element nicht definiert ist.

Die Lösung

In dieser Situation kann die $nextTick() hilfreich sein. Diese Methode verschiebt die Ausführung der bereitgestellten Rückruffunktion bis nach dem nächsten Tick, was bedeutet, dass sie ausgelöst wird, wenn garantiert ist, dass alle DOM-Aktualisierungen abgeschlossen sind.

Beispiel:

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