。$ 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、特定の要素がページに存在するか、非同期プロセスが終了するまでインスタンスのマウントを遅らせることができることを意味します。これは、要素を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/

上Vue.jsのAPIドキュメントによるとvm.$mount()、二人はそれを除いて、機能的に同一である$mount CANヴューモデルはドキュメントから別個にレンダリングされるようにする（オプション）要素選択なしで呼び出される、（それは後で追加することができるように） 。この例はドキュメントからのものです：

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. 上記に続いて、2つ以上の可能性があると想定して、マウントする要素を事前に決定する必要がある場合は、mountを使用することもできます。

何かのようなもの...

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

トップアンサーで十分です。評判ポイントが足りないので、ここにコメントを残しました。オルタナティヴリー：

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

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