[解決済み] .$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を追加する場合に特に有用で、私はテストでも頻繁にこれを使用しています ( こちらをご覧ください ) で、複数のテストで同じ 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/