Vue life cycle hook function

The life cycle

A series of processes from creation to destruction of a vue instance or component (a component is essentially an instance with predefined options) is called a life cycle.

Lifecycle hook function

Functions that are automatically executed in different stages of the life cycle are called hook functions in the life cycle

The three major stages of the life cycle and their hook functions

1. Initial mount phase
   1. beforeCreate
   2. created
   3. beforeMount
   4. mounted
2. Update stage
   1. beforeUpdate
   2. updated
3. Destruction phase
   1. beforeDestroy
   2. destroyed

beforeCreate

Before the instance is created

1. It will only trigger once during a life cycle
2. Can't get mount point element and data data
3. Generally it has no effect, but you can also send ajax if you have to go to the bar, because ajax is an asynchronous operation. When asynchronous completion, the life cycle enters the subsequent stage (mounted is completed), so you can modify it in the subsequent stage The data in data.

created

The instance is created

1. It will only trigger once during a life cycle
2. You can get the data in the data option, and you can call the function in the methods option.
3. Can't get mount point element
4. Generally send an ajax request here to get the data needed when the page is opened

beforeMount

Before the instance is mounted: the relevant render function is called for the first time.

Mounting means: vue completes parsing the template data and replaces it with the real DOM.

1. It will only trigger once during a life cycle
2. The real DOM cannot be obtained through vm. $ El
3. Generally, it doesn't have any effect, you don't need to operate it.

mounted

The instance is mounted

1. It will only trigger once during a life cycle
2. Can get the real DOM
3. Initialize DOM related operations can be placed here. For example, the instantiation of Swiper.

beforeUpdate

Before instance update

1. During a life cycle, it may be triggered multiple times
2. Can get the DOM before the data update, but can't get the DOM after the data update
3. Generally do not modify the data here, and do not send asynchronous requests, it will enter an infinite loop
4. Generally, it doesn't have any effect, you don't need to operate it.

updated

Instance update completed

1. During a life cycle, it may be triggered multiple times.
2. Can get the DOM after data update.
3. Generally do not modify the data here, and do not send asynchronous requests, it will enter an infinite loop
4. Generally used for operations after real DOM update, such as Swiper update.

beforeDestroy

Before the instance is destroyed

1. Do some destruction, such as clearing the timer, destroying the global event binding, etc.

destroyed

The instance is destroyed

1. At this time, only the dom shell was left. The components have been disassembled, the data binding has been removed, the monitoring has been removed, and the child instances have been destroyed.
2. Generally, it doesn't have any effect, you don't need to operate it.