How many phases are there in the vue lifecycle

This article is about how many phases there are in the vue life cycle. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The life cycle of vue consists of eight stages, namely: 1, before instance creation; 2, after instance creation; 3, before instance loading; 4, after instance loading; 5, before instance update; 6, after instance update; 7, before instance destruction; 8, after instance destruction.

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

Life cycle of vue

Each Vue instance goes through a series of initialization processes when it is created. The life cycle hook of vue, that is, a function that is triggered when a certain stage or condition is reached, is designed to complete some actions or events.

Create phase: the vue instance is created

BeforeCreate: before creation, the data in data and methods have not been initialized yet

Created: created. There is a value in data, but not mounted.

Mount phase: the vue instance is mounted to the real DOM node

BeforeMount: you can initiate server requests to send data

Mounted: you can operate DOM at this time

Update phase: triggers the re-rendering of the component when the data data in the vue instance changes

BeforeUpdate: before update

Updated: after update

Destroy phase: vue instance is destroyed

BeforeDestroy: before the instance is terminated, you can manually destroy some methods at this time

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

Load rendering process parent beforeCreate- > parent created- > parent beforeMount- > Child beforeCreate- > Child created- > Child beforeMount- > Child mounted- > parent mounted

During the mount phase, parent created- > child mounted--> child 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

Thank you for reading! This is the end of this article on "how many stages of the vue life cycle". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!