Vue life cycle
The life cycle starts with creating, initializing data, compiling templates, mounting demo, rendering, updating, rendering, destroying, and so on. Each component or instance goes through a complete life cycle, consisting of three phases: initialization, running, and destruction.Copy the code
Vue life cycle details
beforeCreate
At this stage, the data has not yet been mounted and is just an empty shell, with no access to the data and the real DOM, which is generally not used for manipulation.Copy the code
Note: Special requirements can be mounted here with loading, if encountered.
created
The added function does not fire when the data is changed. The penultimate update function does not fire when the data is changed before renderingCopy the code
Note: the initial data can be obtained here
beforeMount
Start looking for the instance template, compile the template for the virtual DOM and put it in the render function for rendering, then execute the beforeMount hook function, where the virtual DOM has been created and is about to render, you can also change the data here, No updated is triggered. This is the last chance to change data without firing another hook functionCopy the code
Note: the initial data can be obtained here
mounted
Then render to render the real DOM, and then perform the Mounted hook function. The component appears on the page, the data and the real DOM have been processed, and the events have been mounted. You can manipulate the real DOM from hereCopy the code
Note: This is the real DOM
beforeUpdate
BeforeUpdate is performed immediately after component or instance data changes, and vue's dome reconstructs the virtual DOM compared to the last virtual DOM tree using the diff algorithmCopy the code
Note: What operations are not handled generally
update
When the update is complete, the updated data is complete, the dome is rerender, and you can operate the updated DOMCopy the code
Note: What operations are not handled generally
beforeDestroy
Execute beforeDestroy immediately after this stage or after calling the $destroy methodCopy the code
Note: There is some cleaning up, such as clearing timers, clearing non-instruction bound events, etc
destroyed
Implement destroyed after removing data binding, listener, etc. from the component and leaving only the DOM shellCopy the code
Note: You can also do some cleaning here, such as clearing timers, clearing non-instruction bound events, etc
Q: When does the parent component lifecycle start the child component lifecycle
A: Parent beforeCreate= Parent created= Parent beforeMount= Child beforeCreate= Child created= Child beforeMountCopy the code