Gotowy do haka Vue 2

Question

Vue 2, Czy istnieje hak do cyklu życia, który faktycznie odnosi się do "ukończonego renderowania"? Chcę umieścić ekran ładowania podczas wprowadzania strony i znika i pokazuje zawartość strony, gdy Vue skończy ładowanie wszystkiego, ale próbowałem większość haka cyklu życia, ale nie działa. Oto coś, co staram się zrobić, jeśli updated odnosi się do „gotowy renderingu”:

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

Jeśli nie ma takiego haka cyklu, co proponujesz mi zrobić zamiast tego? Dzięki

Answer 1

Prawdopodobnie metoda, której szukasz, to mounted(), jest wywoływana, gdy komponent vue jest gotowy. Można sprawdzić dokumentację cyklem Vue here

więc prawdopodobnie Twój instancja Vue będzie wyglądać mniej więcej tak:

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

Ponieważ nie można stwierdzić, że nie ma konkretnego cyklu hak lub inny Vue określonym metodą hak punkt, w którym wszystko jest skończone rendering, użyłem kodu podstawowe js a także oszacowanie czasu potrzebnego do ładowania wszystkie rzeczy z kodami, jak następuje:

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

nadzieję, że znajdzie się ktoś, kto jest mocny w Vue w d podaj nową odpowiedź, aby dokładniej ją podłączyć.

Answer 3

Aby upewnić się, że wszystkie elementy potomne również zostały zamontowane, należy vm.$nextTick - znacznie czystsze niż setTimeout:

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

Źródło: https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

Answer 4

Przed końcem szablonu/html można napisać:

{{ updated() }} 

Mam nadzieję, że pomogło.