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