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

根据上的Vue.js API文档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
}

最佳答案就足够了。刚刚在这里发表评论，因为我的信誉度不足。Alternativley：

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

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