Vue.js 中的“挂载”是什么意思？

Question

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

Answer 1

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://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

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

Answer 2

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 .

Answer 3

“mount”表示将Component插入DOM的时刻。