The life cycle of the Vue instance

The life cycle of the Vue instance is the process of this instance from birth to death, so I'm roughly dividing this cycle into the creation process in the original document | Running Process | Three stages of the destruction process, different results or some small phases

In the first stage, the creation phase completes the creation of an instance of the Vue object from scratch, and this process is divided into several small steps

Here is a demo with code

　　　　　　

1.new Vue () creates a Vue instance, and the life cycle of this instance begins

2.Init Events & Lifecycle This is the first step, which initializes all the life cycle functions of this instance, which are used in sequence in subsequent steps (lifecycle hooks in the document ...). As a Shaanxi person, this word is really not exported ...), after the end of the call to this stage of the first life cycle function beforecreate (), but at this time in this instance of the $el | Data | Methods are not initialized, are undefined, directly call the function in methods will error

Operation Result:

3.Init Injections & Reactivity This process initializes the data in the database and methods, but $el is not initialized so data and created can be used in methods () , while $el is still undefined

The result of the operation is:

　　

4. The next two branch statements actually only do one thing, is to compile the template page in different situations, first find the specified control area, the El attribute is obtained through EL, there is no time through the instance. $mount gets and then determines if there is no template attribute, Some words directly compile the contents of the template, otherwise compile the contents of the control area, you also need to pay attention to the time of the render function, the document has already indicated that the priority of render is higher than the first two, and the template priority is higher than outerhtml, so render > Template > outerHTML

　　　　

　　At this point, the compiled template page is still in memory, not really render to the page, then entered into the beforemount ()

The result of the operation is:

　　

5.Create vm. $el and Replace "El" with it, this process replaces the rendered template page in memory with the page, so the mounted () execution is the last life-cycle function of the creation phase, Page structure is rendered to the browser page for the first time

The result of the operation is:

6. Next into the second big stage, the operation phase, the life cycle function of this phase is only one----> ensure that the data of the model layer is consistent with the effect rendered in the view layer, so these functions may be executed more than once, or may not be executed, And that depends on whether the data is changed when the button is pressed, and the data in the instance Information property changes, the first life cycle function beforeUpdate ()is executed at this stage, and the data in memory is updated, but the page is not updated

The result of the operation is:

7.Virtual Dom Re-render and patch the process is to replace the in-memory re-rendered template page to the browser page, Virtual DOM refers to the in-memory rendered template structure, so update () After the execution, the data on the page and memory in the same, the running process to this end, the background output and the previous process is not put on the map, now the page content has changed

8. The final stage is the destruction phase, and the instance call $destroy () triggers the first life cycle function beforedestory (), at which time all data and timing monitoring of the instance is normally available in teardown Watchers,child After the components and event Linsteners, all event listeners and subcomponents are removed, and afterdestroyed () is executed, the Vue instance is officially destroyed.

It is purely personal opinion, not to be corrected.

The life cycle of the Vue instance