Vue.js में निर्मित और घुड़सवार घटनाओं के बीच अंतर

181

Vue.js प्रलेखन निम्नानुसार घटनाओं createdऔर mountedघटनाओं का वर्णन करता है:

created

उदाहरण बनने के बाद समकालिक रूप से कॉल किया जाता है। इस स्तर पर, उदाहरण ने विकल्पों को संसाधित करना समाप्त कर दिया है जिसका अर्थ है कि निम्नलिखित सेट किए गए हैं: डेटा अवलोकन, गणना किए गए गुण, विधियाँ, घड़ी / घटना कॉलबैक। हालाँकि, बढ़ते चरण को शुरू नहीं किया गया है, और $ एल संपत्ति अभी तक उपलब्ध नहीं होगी।

mounted

उदाहरण के बाद कॉल किया गया है, जहां एल को नव निर्मित वीएम द्वारा प्रतिस्थापित किया गया है। यदि रूट उदाहरण को एक इन-डॉक्यूमेंट तत्व में रखा गया है, तो vm। $ El भी इन-डॉक्यूमेंट में होगा जब माउंटेड कहा जाता है।

सर्वर-साइड रेंडरिंग के दौरान इस हुक को नहीं कहा जाता है।

मैं सिद्धांत को समझता हूं, लेकिन अभ्यास के संबंध में मेरे 2 प्रश्न हैं :

क्या कोई ऐसा मामला है जहां createdपर इस्तेमाल किया जाएगा mounted?
मैं createdवास्तविक-जीवन (वास्तविक-कोड) स्थिति के लिए घटना का क्या उपयोग कर सकता हूं ?

javascript vue.js

— चीनी कम
स्रोत

createdपहले कहा जाता है, इसलिए यह उदाहरण के लिए एपीआई बैकएंड से डेटा लाने को ट्रिगर करने के लिए समझ में आता है।

— ईगोर स्टैम्बिकियो

पुष्टि कर सकते हैं, फुलस्टैक व्यू बुक में उदाहरण सभी एप created()कॉल के लिए कार्रवाई भेजने के लिए उपयोग करते हैं।

— चॉवी

255

created(): चूंकि विकल्पों का प्रसंस्करण समाप्त हो गया है इसलिए आपके पास प्रतिक्रियाशील dataगुणों तक पहुंच है और यदि आप चाहें तो उन्हें बदल सकते हैं। इस स्तर पर DOM को अभी तक माउंट या जोड़ा नहीं गया है। इसलिए आप यहां कोई डोम हेरफेर नहीं कर सकते

mounted(): DOM को माउंट या रेंडर करने के बाद कॉल किया जाता है। यहां आपके पास DOM तत्वों की पहुंच है और उदाहरण के लिए भीतर का HTML प्राप्त करने के लिए DOM हेरफेर किया जा सकता है:

console.log(element.innerHTML)

तो आपके सवाल:

Is there any case where created would be used over mounted?

आम तौर पर बैकएंड एपीआई से डेटा प्राप्त करने और इसे डेटा गुणों के लिए सेट करने के लिए उपयोग किया जाता है। लेकिन SSR mounted()हुक में मौजूद नहीं है आपको केवल बनाए गए हुक में डेटा लाने जैसे कार्य करने की आवश्यकता है

What can I use the created event for, in real-life (real-code) situation?

बाह्य एपीआई से प्रदान किए जाने वाले किसी भी आवश्यक डेटा को लाने के लिए (जैसे JSON) और इसे किसी भी प्रतिक्रियाशील डेटा गुणों के लिए निर्दिष्ट करना

data:{
    myJson : null,
    errors: null
},
created(){
    //pseudo code
    database.get().then((res) => {
        this.myJson = res.data;
    }).catch((err) => {
        this.errors = err;
    });
}

— वामसी कृष्ण
स्रोत

जब बनाई गई एप में कॉल करते हैं तो क्या यह अगले जीवन चक्र के चरण पर जाने से पहले सभी एस्किंक संचालन के पूरा होने का इंतजार करता है?

— ओमिनस

@Ominus नहीं यह प्रतीक्षा नहीं करता है, इस fiddle- jsfiddle.net/1k26sqrx/] को चलाएं और कंसोल लॉग को देखें

— Vamsi Krishna

मैंने देखा है कि जब बनाया () बनाया () के बजाय प्रयोग किया जाता है। Vue परीक्षण यदि प्रतिक्रियाशील चर सेट करता है, वास्तव में प्रतिक्रियाशील चर के रूप में मौजूद है। यदि नहीं, तो एक त्रुटि है। यह निर्मित नहीं है () "संपत्ति या विधि" फू "उदाहरण पर परिभाषित नहीं है, लेकिन रेंडर के दौरान संदर्भित है। सुनिश्चित करें कि यह संपत्ति प्रतिक्रियाशील है।"

— रॉब जुर्लिंक