Różnica między. $ Mount () a el [Vue JS]

Jaka jest różnica między tym kodem:

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

i ten:

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

Mam na myśli, jakie są korzyści z używania .$mount()zamiast ellub odwrotnie?

$mountumożliwia jawne zamontowanie instancji Vue, gdy zajdzie taka potrzeba. Oznacza to, że możesz opóźnić montowanie swojej vueinstancji do czasu zaistnienia określonego elementu na stronie lub zakończenia procesu asynchronicznego, co może być szczególnie przydatne podczas dodawania vue do starszych aplikacji, które wstrzykują elementy do DOM. często w testowaniu ( patrz tutaj ), gdy chciałem użyć tej samej instancji vue w wielu testach:

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

Oto JSFiddle: https://jsfiddle.net/79206osr/

Zgodnie z dokumentacją API Vue.js vm.$mount(), oba są funkcjonalnie takie same, z wyjątkiem tego, że $mount można je (opcjonalnie) wywołać bez selektora elementów, co powoduje, że model Vue jest renderowany oddzielnie od dokumentu (więc można go później dołączyć) . Ten przykład pochodzi z dokumentów:

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)

W podanym przez ciebie przykładzie nie wierzę, że istnieje duża różnica lub korzyść. Jednak w innych sytuacjach może wystąpić korzyść. (Nigdy nie spotkałem się z takimi sytuacjami).

1. Dzięki temu $mount()masz większą elastyczność, na jakim elemencie zostanie zamontowany, jeśli kiedykolwiek zajdzie taka potrzeba.

2. Podobnie, jeśli z jakiegoś powodu musisz utworzyć instancję, zanim faktycznie wiesz, na jakim elemencie zostanie ona zamontowana (być może element, który jest tworzony dynamicznie), możesz zamontować ją później za pomocą vm.$mount()

3. Postępując zgodnie z powyższym możesz również użyć mount, gdy musisz wcześniej zdecydować, który element zamontować, zakładając, że mogą być dwie lub więcej możliwości.

Coś jak...

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

Najlepsza odpowiedź jest wystarczająco dobra. właśnie zostawiłem tutaj komentarz, ponieważ nie mam wystarczającej liczby punktów reputacji. Alternativley:

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

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