What are the stages of vue’s life cycle?

Vue's declaration cycle has eight stages, which are: 1. Before instance creation; 2. After instance creation; 3. Before instance loading; 4. After instance loading; 5. Before instance update; 6. After the instance is updated; 7. Before the instance is destroyed; 8. After the instance is destroyed.

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

What are the stages of vue’s life cycle?

Each Vue instance will go through a series of initialization processes when it is created. Vue’s life cycle hook means that when a certain stage or condition is reached, The purpose of triggering the function is to complete some actions or events

• createPhase: the vue instance is created

beforeCreate: Before creation, the data in data and methods have not been initialized yet

created: After creation, there are values ​​in data and not mounted

• mount Phase: The vue instance is mounted to the real DOM node

beforeMount: can be initiated Server request, go to data

mounted: At this time, you can operate the DOM

• update stage: when inside the vue instance When the data data changes, the component is triggered to re-render

beforeUpdate : Before update

updated: After update

• destroy Phase: The vue instance is destroyed

beforeDestroy: Before the instance is destroyed, this Some methods can be manually destroyed when

destroyed: After destruction

Component life cycle

Life cycle (parent-child component) parent Component beforeCreate --> Parent component created --> Parent component beforeMount --> Child component beforeCreate --> Child component created --> Child component beforeMount --> Child component mounted --> Parent component mounted -->parent component beforeUpdate -->child component beforeDestroy--> child component destroyed --> parent component updated

Loading rendering process parent beforeCreate->parent created->parent beforeMount ->child beforeCreate->child created->child beforeMount->child mounted->parent mounted

Mounting phase parent created->child created->child mounted->parent mounted

Parent component update phase parent beforeUpdate->parent updated

Child component update phase parent beforeUpdate->child beforeUpdate->child updated->parent updated

Destroy phase parent beforeDestroy->child beforeDestroy->child destroyed->parent destroyed

[Related recommendation: "vue.js tutorial"]

The above is the detailed content of What are the stages of vue’s life cycle?. For more information, please follow other related articles on the PHP Chinese website!