VUE life cycle understanding (overall process from top to bottom)

VUE life cycle (overall process from top to bottom)

****The constructor generates Vue real columns

Event and lifecycle hook initialization

beforeCreate: Called before data initialization and Events event configuration

created: After the data has been initialized, the attribute event callback is calculated, but the DOM tree is not mounted.
Determine whether there is an el object and mount it if none

Whether there is a template => If yes, convert the template to render and replace it, and use it to render to create a DOM tree
=> If no, compile the el object as the outer html as a template

beforeMount: The render function is called for the first time before mounting, generates a virtual DON,
creates $el (virtual) under the vue instance and replaces it with the real DOM

mounted: The mounting is complete, the DOM tree has been rendered to the page, and DOM operations can be performed

beforeUpdate: The data is updated to be called

update: Virtual DOM re-rendering patch to re-render DOM with minimal DOM expenditure

beforeDestroy: Called before the real column is destroyed, you can also access the data of the real column here

Clear update, sub-components, event monitoring, etc.

destroyed: call after the component is destroyed****

I have read some articles to understand

Guess you like

Origin blog.csdn.net/jsxiaochen/article/details/108106272