Difference between .$mount() and el [Vue JS]

Question

What's the difference between this code:

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

and this one:

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

I mean what's the benefit in using .$mount() instead of el or vice versa?

Answer 1

$mount allows you to explicitly mount the Vue instance when you need to. This means that you can delay the mounting of your vue instance until a particular element exists in your page or some async process has finished, which can be particularly useful when adding vue to legacy apps which inject elements into the DOM, I've also used this frequently in testing (See Here) when I've wanted to use the same vue instance across multiple tests:

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

 

Here's the JSFiddle: https://jsfiddle.net/79206osr/

Answer 2

According to the Vue.js API docs on vm.$mount(), the two are functionally the same, except that $mount can (optionally) be called without an element selector, which causes the Vue model to be rendered separate from the document (so it can be appended later). This example is from the docs:

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)