Vue.js
जीवनचक्र के हुक

Vue 1.x के लिए हुक

• init

  आवृत्ति को प्रारंभिक रूप से कॉल करने के बाद और किसी भी प्रारंभिक डेटा अवलोकन से पहले कॉल किया जाता है।

• created

  उदाहरण बनने के बाद समकालिक रूप से कॉल किया जाता है। यह $el सेटअप से पहले होता है, लेकिन data observation , computed properties , watch/event callbacks और methods सेटअप किया गया है।

• beforeCompile

  Vue उदाहरण के संकलन से तुरंत पहले।

• compiled

  संकलन पूरा होने के तुरंत बाद। सभी directives जुड़े हुए हैं लेकिन अभी भी $el से पहले उपलब्ध हैं।

• ready

  संकलन और $el पूरा होने के बाद और उदाहरण पहली बार DOM में इंजेक्ट किया गया है।

• attached

  तब होता है जब $el एक directive या उदाहरण द्वारा DOM से जुड़ा होता है $appendTo() ।

• detached

  DOM या इंस्टेंस विधि से $el को हटाए / अलग किए जाने पर कॉल किया जाता है।

• beforeDestroy

  Vue उदाहरण नष्ट होने से तुरंत पहले, लेकिन अभी भी पूरी तरह से कार्यात्मक है।

• destroyed

  एक इंस्टेंस नष्ट होने के बाद कॉल किया जाता है। सभी bindings और directives पहले से ही अनबाउंड हैं और बच्चे के इंस्टेंस को भी नष्ट कर दिया गया है।

एक उदाहरण में उपयोग करना

चूंकि Vue.js में सभी जीवनचक्र हुक केवल functions , आप उनमें से किसी को भी सीधे उदाहरण घोषणा में रख सकते हैं।

//JS
new Vue({

    el: '#example',

    data: {
        ...
    },

    methods: {
        ...
    },

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

    ready: function() {
        ...
    }

});

सामान्य नुकसान: `तैयार ()` हुक से डोम तक पहुंचना

ready() हुक के लिए एक सामान्य usecase डोम का उपयोग करना है, उदाहरण के लिए जावास्क्रिप्ट प्लगइन आरंभ करना, एक तत्व के आयाम प्राप्त करना आदि।

समस्या

वीयू के अतुल्यकालिक डोम अपडेट तंत्र के कारण, यह गारंटी नहीं है कि ready() हुक कहा जाने पर डोम पूरी तरह से अपडेट हो गया है। यह आमतौर पर एक त्रुटि के कारण होता है क्योंकि तत्व अपरिभाषित है।

समाधान

इस स्थिति के लिए $nextTick() इंस्टेंस विधि मदद कर सकती है। यह विधि प्रदान की गई कॉलबैक फ़ंक्शन के निष्पादन को अगले टिक के बाद तक रोक देती है, जिसका अर्थ है कि यह निकाल दिया जाता है जब सभी डोम अपडेट समाप्त होने की गारंटी होती है।

उदाहरण:

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