9
votes

What does "mount" mean on using instance of vue.js to target a DOM element? (even in plain English?). For example in following:

This code creates a new instance of Vue and mounts it on the HTML element with the ID of app.

const app = new Vue().$mount('#app');

When the Vue instance has the el option, it automatically mounts to that element

2
Attaches it to the DOM. - Adam
i think all it means is it is bootstrapping the app to an html element as the container for the app views. - floor

2 Answers

12
votes

Mounting takes place at the Virtual Dom Level, before the User sees anything.

When you $mount('#app'), there will be an 'el' parameter that gets set. This 'el' defines the ID of the element that this instance will be "mounted" to.

So, in your template, if you have an element that you want to be the mounted component, then in your declaration of the component, you would mount it with "el: #app".

VueJS Life-Cycle Diagram: https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

Mounted Life-Cycle Hook: https://vuejs.org/v2/api/#mounted

7
votes

What is mounting in vue? In vue, every instance is first stored as Virtual DOM objects(virtual html elements) in memory.When Vue create those components(virtual DOM)visible to the real DOM(Actual html elements) , the moment in which it create virtual DOM into real DOM is call 'Mounting'. As the app state changes , vue detect changes user expect to see and put data changes to the real DOM from the memory.That is called an 'update'. The entire process is called Vue Lifescyclehooks which has four stages, namely create,mount,update and destroyed.