Load rendering process
parent beforeCreate -> parent created -> parent beforeMount -> child beforeCreate -> child created -> child beforeMount -> child mounted -> parent mounted child
component update process
parent beforeUpdate -> child beforeUpdate -> child updated -> parent updated
parent component update process
parent beforeUpdate -> parent updated
destruction process
parent beforeDestroy -> child beforeDestroy -> child destroyed -> parent destroyed
mount phase
This process mainly involves four hook functions: beforeCreate, created, beforeMount, and mounted. The execution sequence is:
parent beforeCreate -> parent created -> parent beforeMount -> child beforeCreate -> child created -> child beforeMount -> child mounted -> parent mounted must wait for the
child component to be mounted before the parent component can be mounted , so the mounted of the parent component is at the end.
update phase
This process mainly involves two hook functions, beforeUpdate and updated. Note that when the parent-child component has data transfer, only this update phase performs sequential comparison. The execution order is:
parent beforeUpdate -> child beforeUpdate -> child updated -> parent updated
Destruction phase
This process mainly involves two hook functions, beforeDestroy and destroyed. The execution order is:
parent beforeDestroy -> child beforeDestroy -> child destroyed -> parent destroyed
features
The execution order of Vue parent-child component lifecycle hooks follows: from outside to inside, then from inside to outside
Introduction to life cycle
beforeCreate: executed before the instance is created.
Both el and data are undefined, not yet initialized. None of the data or methods on methods, computed, and watch can be accessed.created: Executed after the instance initialization is completed.
The page has not started to render, and the DOM nodes cannot be accessed. el remains undefined. But you can operate data and methods, etc. You can do some initial data acquisition. You can't interact with DOM at the current stage. If you need it, you can access DOM through $nextTick.beforeMount: execute before mounting.
Both el and data are initialized, the virtual DOM has been created, and the rendering will start soon.mounted: Executed when the page is rendered.
The real DOM is mounted and the DOM nodes can be accessed. The DOM can be manipulated using refs. You can also send requests to the background.
beforeUpdate: Executed when the data is updated.
At this time, the data in the Vue instance is the latest, but the data in the page is still old, and the data can be further changed at this time without causing re-rendering.updated: Executed when the DOM re-rendering caused by data update is completed.
At this point, the DOM has been updated and DOM-related operations can be performed
beforeDestroy: executed before the instance is destroyed.
Instances are still fully usable. At this stage, follow-up work is generally performed, such as clearing the timer, unbinding, etc.destroyed: The instance is destroyed.
Everything bound to the instance will be released, such as event monitoring and data binding to the DOM, all sub-instances will also be destroyed, and the component will be unusable if it is disassembled. Changing data will not re-render, but the DOM structure still exists.