Diferencia entre. $ Mount () y el [Vue JS]

¿Cuál es la diferencia entre este código?

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

y éste:

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

Quiero decir, ¿cuál es el beneficio de usar en .$mount()lugar de elo viceversa?

$mountle permite montar explícitamente la instancia de Vue cuando lo necesite. Esto significa que puede retrasar el montaje de su vueinstancia hasta que exista un elemento en particular en su página o hasta que haya finalizado algún proceso asíncrono, lo que puede ser particularmente útil al agregar vue a aplicaciones heredadas que inyectan elementos en el DOM, también he usado esto con frecuencia en las pruebas ( ver aquí ) cuando quería usar la misma instancia de vue en varias pruebas:

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

Aquí está el JSFiddle: https://jsfiddle.net/79206osr/

De acuerdo con los documentos de la API de Vue.js vm.$mount(), los dos son funcionalmente iguales, excepto que $mount se pueden llamar (opcionalmente) sin un selector de elementos, lo que hace que el modelo de Vue se represente por separado del documento (por lo que se puede agregar más adelante) . Este ejemplo es de los documentos:

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)

En el ejemplo que proporciona, no creo que haya mucha diferencia o beneficio. Sin embargo, en otras situaciones puede haber un beneficio. (Nunca me he encontrado con situaciones como las siguientes).

1. Con $mount()usted tiene más flexibilidad sobre el elemento en el que se montará si fuera necesario.

2. De manera similar, si por alguna razón necesita crear una instancia de la instancia antes de saber realmente en qué elemento se montará (tal vez un elemento que se crea dinámicamente), entonces puede montarlo más tarde usando vm.$mount()

3. Siguiendo con lo anterior, también puede usar mount cuando necesite tomar una decisión de antemano sobre qué elemento montar, asumiendo que puede haber dos o más posibilidades.

Algo como...

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

La respuesta principal es lo suficientemente buena. acabo de dejar un comentario aquí porque no tengo suficientes puntos de reputación. Alternativamente:

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

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