के बीच अंतर। $ माउंट () और एल [Vue JS]

Question

इस कोड में क्या अंतर है:

new Vue({
    data () {
        return {
            text: 'Hello, World'
        };
    }
}).$mount('#app')

और ये वाला:

new Vue({
    el: '#app',
    data () {
        return {
            text: 'Hello, World'
        };
    }
})

मेरा मतलब है कि या इसके विपरीत .$mount()का उपयोग करने में क्या लाभ है el?

Answer 1

$mountजब आप की आवश्यकता हो तो आप स्पष्ट रूप से Vue उदाहरण को माउंट करने की अनुमति देता है। इसका मतलब है कि आप अपने vueउदाहरण के बढ़ते जाने में देरी कर सकते हैं जब तक कि आपके पृष्ठ में कोई विशेष तत्व मौजूद न हो या कुछ async प्रक्रिया समाप्त हो गई हो, जो विशेष रूप से उपयोगी हो सकता है जब vue को उन विरासत ऐप्स में जोड़ा जाता है जो DOM में तत्वों को इंजेक्ट करते हैं, मैंने भी इसका उपयोग किया है। परीक्षण में अक्सर ( यहां देखें ) जब मैं कई परीक्षणों में एक ही प्रतिज्ञा उदाहरण का उपयोग करना चाहता हूं:

// Create the vue instance but don't mount it
const vm = new Vue({
  template: '<div>I\'m mounted</div>',
  created(){
    console.log('Created');
  },
  mounted(){
    console.log('Mounted');
  }
});

// Some async task that creates a new element on the page which we can mount our instance to.
setTimeout(() => {
   // Inject Div into DOM
   var div = document.createElement('div');
   div.id = 'async-div';
   document.body.appendChild(div);

  vm.$mount('#async-div');
},1000)

 

यहाँ JSFiddle: https://jsfiddle.net/79206osr/

Answer 2

पर Vue.js एपीआई डॉक्स के अनुसार vm.$mount(), दोनों ही कार्यात्मक समान हैं, सिवाय इसके कि $mount कर सकते हैं (वैकल्पिक) एक तत्व चयनकर्ता बिना कहा जा है, जिसकी वजह Vue मॉडल दस्तावेज़ से अलग प्रदान करने (ताकि इसे बाद में संलग्न किया जा सकता) । यह उदाहरण डॉक्स से है:

var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})
// create and mount to #app (will replace #app)
new MyComponent().$mount('#app')

// the above is the same as:
new MyComponent({ el: '#app' })
// or, render off-document and append afterwards:
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

Comments

यदि आपने el के साथ vue subclass (Vue.extend) का उपयोग किया है, तो आपको कंसोल मिलता है: [Vue चेतावनी]: विकल्प "el" का उपयोग केवल newकीवर्ड के साथ इंस्टेंस निर्माण के दौरान किया जा सकता है । $ माउंट इस चेतावनी को नहीं दिखाते हैं।

— कार्लास

यह वही है जो मैं माउंट तत्व को बदलने के लिए नहीं देख रहा था , धन्यवाद!

— RecuencoJones

Answer 3

आपके द्वारा दिए गए उदाहरण में, मुझे विश्वास नहीं है कि वास्तव में बहुत अंतर या लाभ है। हालांकि, अन्य स्थितियों में एक लाभ हो सकता है। (मैंने कभी भी निम्न जैसी स्थितियों का सामना नहीं किया है)।

1. साथ $mount()आप और अधिक लचीलापन क्या तत्व यह है, तो थे कि कभी भी आवश्यक हो पर रखा जाएगा।

2. इसी प्रकार यदि आप किसी कारण से आपको उदाहरण से तुरंत अवगत कराने की आवश्यकता है, तो आपको वास्तव में पता होगा कि यह किस तत्व पर रखा जाएगा (शायद एक तत्व जो गतिशील रूप से बनाया गया है) तो आप बाद में इसका उपयोग करके माउंट कर सकते हैं vm.$mount()

3. उपरोक्त के साथ-साथ आप माउंट का उपयोग भी कर सकते हैं जब आपको हाथ से पहले निर्णय लेने की आवश्यकता होती है कि कौन सा तत्व माउंट करने के लिए यह मानते हुए कि दो या अधिक संभावनाएं हो सकती हैं।

कुछ इस तरह...

if(document.getElementById('some-element') != null){
      // perform mount here
}

Answer 4

शीर्ष उत्तर काफी अच्छा है। यहाँ सिर्फ एक टिप्पणी छोड़ दी क्योंकि मेरे पास पर्याप्त प्रतिष्ठा अंक नहीं हैं। अल्टरनेटिवली:

 setTimeout(() => {
   const element = document.createElement('div');
   document.body.appendChild(element);

   vm.$mount(element);
}, 0)