Різниця між. $ Mount () та el [Vue JS]

У чому різниця між цим кодом:

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

а цей:

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

Я маю на увазі, яка користь від використання .$mount()замість elабо навпаки?

$mountдозволяє явно монтувати екземпляр Vue, коли це потрібно. Це означає, що ви можете затримати встановлення вашого vueекземпляра, поки на вашій сторінці не з’явиться певний елемент або не завершиться якийсь процес асинхронізації, що може бути особливо корисно при додаванні vue до застарілих програм, які вводять елементи в DOM, я також використовував це часто під час тестування ( див. тут ), коли я хотів використовувати один і той же екземпляр vue для кількох тестів:

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

Згідно з документами API 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)

У наведеному вами прикладі я не вірю, що насправді є велика різниця чи користь. Однак в інших ситуаціях може бути користь. (Я ніколи не стикався з подібними ситуаціями).

1. С $mount() більшій гнучкості, на якому елементі він буде встановлений, якщо це колись буде потрібно.

2. Подібним чином, якщо з якихось причин вам потрібно створити екземпляр екземпляра, перш ніж ви насправді знаєте, на якому елементі він буде встановлений (можливо, елемент, який створюється динамічно), тоді ви зможете монтувати його пізніше, використовуючи vm.$mount()

3. Наслідуючи вищезазначене, ви можете використовувати також mount, коли вам потрібно прийняти рішення заздалегідь, який елемент монтувати, припускаючи, що можливо дві або більше можливостей.

Щось на зразок...

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

Топ відповіді досить хороший. просто залишив тут коментар, оскільки мені не вистачає очок репутації. Альтернативлей:

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

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