Unterschied zwischen. $ Mount () und el [Vue JS]

Was ist der Unterschied zwischen diesem Code:

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

und das hier:

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

Ich meine, was ist der Vorteil bei der Verwendung .$mount()anstelle von eloder umgekehrt?

$mountMit dieser Option können Sie die Vue-Instanz bei Bedarf explizit bereitstellen. Dies bedeutet, dass Sie das Mounten Ihrer vueInstanz verzögern können, bis ein bestimmtes Element auf Ihrer Seite vorhanden ist oder ein asynchroner Prozess abgeschlossen ist. Dies kann besonders nützlich sein, wenn Sie älteren Apps, die Elemente in das DOM einfügen, Vue hinzufügen. Ich habe dies auch verwendet häufig beim Testen ( siehe hier ), wenn ich dieselbe vue-Instanz für mehrere Tests verwenden wollte:

// 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)

Hier ist die JSFiddle: https://jsfiddle.net/79206osr/

Gemäß den Vue.js-API-Dokumenten vm.$mount()sind die beiden funktional identisch, außer dass $mount sie (optional) ohne Elementauswahl aufgerufen werden können, wodurch das Vue-Modell vom Dokument getrennt gerendert wird (sodass es später angehängt werden kann). . Dieses Beispiel stammt aus den Dokumenten:

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)

In dem Beispiel, das Sie zur Verfügung stellen, glaube ich nicht, dass es wirklich einen großen Unterschied oder Nutzen gibt. In anderen Situationen kann es jedoch einen Vorteil geben. (Ich habe noch nie Situationen wie die folgenden erlebt).

1. Mit haben $mount()Sie mehr Flexibilität, auf welchem ​​Element es montiert wird, wenn dies jemals notwendig sein sollte.

2. Wenn Sie aus irgendeinem Grund die Instanz instanziieren müssen, bevor Sie tatsächlich wissen, auf welchem ​​Element sie bereitgestellt wird (möglicherweise ein Element, das dynamisch erstellt wird), können Sie sie später mithilfe von bereitstellen vm.$mount()

3. Im Anschluss an das oben Gesagte können Sie auch mount verwenden, wenn Sie vorab entscheiden müssen, welches Element gemountet werden soll, vorausgesetzt, es gibt zwei oder mehr Möglichkeiten.

Etwas wie...

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

Die beste Antwort ist gut genug. Ich habe hier nur einen Kommentar hinterlassen, da ich nicht genug Reputationspunkte habe. Alternativley:

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

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