Vue 2 Haken bereit

Question

Vue 2, Gibt es einen Lebenszyklus-Hook, der sich eigentlich auf "fertiges Rendering" bezieht? Ich möchte einen Ladebildschirm beim Eingeben einer Seite einfügen und es wird ausgeblendet und zeigt den Seiteninhalt an, sobald Vue fertig ist, alles zu laden, aber ich habe den größten Teil des Lebenszyklus-Hooks ausprobiert, funktioniert aber nicht. Hier ist etwas, was ich versuchen würde, zu tun, wenn updated bezieht sich auf „fertig machen“:

updated(){ 
    this.loaded() 
}, 
methods:{ 
    loaded(){ 
    var vm = this; 
    this.loading = false; 
    } 
} 

Wenn es nicht so ein Lifecycle-Haken ist, was würden Sie mir empfehlen, stattdessen zu tun? Danke

Answer 1

Wahrscheinlich die Methode, die Sie suchen, ist mounted(), das wird gefeuert, wenn die Vue-Komponente bereit ist. Sie können die Dokumentation Vue Lifecycle überprüfen here

so wahrscheinlich Ihre Vue Beispiel würde wie folgt aussehen:

var app = new Vue({ 
    el: '#app', 

    /* 
    * When the instance is loaded up 
    */ 
    mounted: function() { 
    this.loaded() 
    } 

    methods: { 
    loaded: function() { 
     var vm = this 
     this.loading = false 
    } 
    } 
}) 

Answer 2

Da ich nicht finden können, dass es einen bestimmten Lebenszyklus Haken oder andere Vue angegebenen Methode haken Sie den Punkt, an dem alles Rendering abgeschlossen ist, ich die grundlegende js Code sowie Schätzung der Zeit für das Laden all die Dinge, mit Codes wie folgt Bedarf verwendet:

mounted(){ 
    this.loaded() 
}, 
methods:{ 
    loaded(){ 
    var vm = this; 
    setTimeout(function(){ 
     vm.loading = false 
    }, 3000); 
    } 
} 

Hoffnung es wird jemand, der Vue stark ein d bieten eine neue Antwort, um es genauer zu haken.

Answer 3

Um sicherzustellen, dass alle untergeordneten Komponenten auch verwenden vm.$nextTick montiert worden - viel sauberer als ein setTimeout:

mounted: function() { 
    this.$nextTick(function() { 
    // Code that will run only after the 
    // entire view has been rendered 
    }) 
} 

Quelle: https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

Answer 4

Vor Ende template/html Sie schreiben:

{{ updated() }} 

Ich hoffe, es hat geholfen.