वू 2 हुक तैयार

Question

वू 2, क्या कोई जीवन चक्र हुक है जो वास्तव में "पूर्ण प्रतिपादन" को संदर्भित करता है? एक पृष्ठ दर्ज करते समय मैं लोडिंग स्क्रीन डालना चाहता हूं और यह सब कुछ लोड हो जाने के बाद पेज सामग्री को दूर कर देता है और पेज सामग्री को दिखाता है, लेकिन मैंने अधिकांश लाइफसाइकिल हुक की कोशिश की है लेकिन काम नहीं कर रहा है।

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

अगर वहाँ इस तरह के एक जीवन चक्र हुक नहीं है, आप क्या सुझाव है मुझे के बजाय करने के लिए: यहाँ कुछ मैं अगर updated करने के लिए "समाप्त प्रतिपादन" संदर्भित करता है करने की कोशिश करेंगे? धन्यवाद

Answer 1

शायद जिस विधि को आप खोज रहे हैं वह mounted() है, जब यह व्यू घटक तैयार होता है तो इसे निकाल दिया जाता है। आप Vue जीवन चक्र प्रलेखन जाँच कर सकते हैं here

तो शायद अपनी Vue उदाहरण कुछ इस तरह दिखेगा: मैं नहीं मिल सकता है के रूप में एक विशिष्ट जीवन चक्र हुक या करने के लिए अन्य Vue निर्दिष्ट विधि है कि वहाँ

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

बिंदु है जहां सब कुछ प्रतिपादन समाप्त हो गया है हुक, मैं निम्नलिखित के रूप में बुनियादी js कोड के साथ ही कोड के साथ सभी चीजें लोड करने के लिए आवश्यक समय के आकलन के लिए इस्तेमाल किया:

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

आशा नहीं होगा कोई है जो Vue एक पर मजबूत है डी इसे अधिक सटीक रूप से हुक करने के लिए एक नया उत्तर प्रदान करते हैं।

Answer 3

सुनिश्चित करें कि सभी बच्चे घटक भी घुड़सवार किया गया है करने के लिए, का उपयोग vm.$nextTick - एक setTimeout की तुलना में बहुत क्लीनर:

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

स्रोत: https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

Answer 4

टेम्पलेट के अंत से पहले/HTML आप लिख सकते हैं:

{{ updated() }} 

मुझे आशा है कि इससे मदद मिलेगी।