Vue.js .$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)

//创建vue实例，但不要装载它
const vm=新的Vue({
模板：“我已安装”，
创建（）{
console.log（'Created'）；
},
安装的（）{
console.log（'Mounted'）；
}
});
//一些异步任务，它在页面上创建一个新元素，我们可以将实例装载到其中。
设置超时（（）=>{
//将Div注入DOM
var div=document.createElement（'div'）；
div.id='async div'；
文件.正文.附件（div）；
vm.$mount（'async div'）；
},1000)

---

这里是JSFiddle:

在您提供的示例中，我不认为有什么区别或好处。然而，在其他情况下可能会有好处。（我从未遇到过以下情况）

使用

$mount（）

您可以更灵活地选择它将是什么元素 如果有必要的话，安装在上面

类似地，如果出于某种原因需要实例化 实例，然后才知道它将安装在哪个元素上 （可能是动态创建的元素）然后您可以装载 稍后使用

vm.$mount（）

按照上面的说明，您也可以在安装时使用mount 需要在安装到哪个元件之前做出决定 假设可能有两种或两种以上的可能性

类似于

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

---

根据上的Vue.js API文档，这两个模型在功能上是相同的，只是

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

var MyComponent=Vue.extend({
模板：“你好！”
})
//创建并装载到#应用程序（将替换#应用程序）
新的MyComponent（）.$mount（“#app”）
//以上内容同：
新的MyComponent（{el:'#app'}）
//或者，渲染文档并随后追加：
var component=new MyComponent（）.$mount（）
document.getElementById（'app'）.appendChild（组件$el）

最上面的答案已经足够好了。我只是在这里留言，因为我没有足够的声望。Alternativley：

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

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

---

如果将vue子类（vue.extend）与el一起使用，则您将进入控制台：[vue warn]：选项“el”只能在实例创建过程中使用

new

关键字$挂载不显示此警告。这正是我所寻找的不替换挂载元素，谢谢！