vue.js - mounted - watch vue js example

Diferencia entre. $ Mount() y el

Question

¿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 .$mount() lugar de el o viceversa?

Answer 1

De acuerdo con los documentos de la API de Vue.js en vm.$mount() Mount vm.$mount() , los dos son funcionalmente iguales, excepto que $mount puede (opcionalmente) llamarse sin un selector de elementos, lo que hace que el modelo de Vue se separe del documento (para que pueda agregarse más tarde). 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)

Answer 2

En el ejemplo que brindas, 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() tienes más flexibilidad sobre qué elemento se montará si fuera necesario.

2. Del mismo modo, 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), puede montarla 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 para asumir que puede haber dos o más posibilidades.

Algo como...

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

Answer 3

$mount permite $mount explícitamente la instancia de Vue cuando lo necesite. Esto significa que puede retrasar el montaje de su instancia de vue hasta que exista un elemento en particular en su página o que haya finalizado algún proceso asíncrono, 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 he querido usar la misma instancia 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/