What is a lifecycle:
From the creation, operation, and destruction of Vue instances, there are always various events. These events are collectively called the life cycle!
Life cycle hook: it is just an alias for life cycle events;
lifecycle hook = lifecycle function = lifecycle event
significance:
Users are given the opportunity to add their own code at various stages.
Initialization (create) --- component mount (mount) ----- component update (update) --- destruction (destroy)
| life cycle | what happened |
| beforeCreate | Before initializing the interface: the data and methods on data, methods, computed and watch cannot be accessed at the current stage |
| created | After the interface is initialized: Occurs after the instance is created. The data observation has been completed in the current stage, that is, the data can be used and changed. Changing the data here will not trigger the updated function, that is, the view will not be updated. SSR can be placed here. |
| beforeMount | Before mounting: the template compilation is completed, the virtual Dom has been created, and the rendering will start soon. Data can also be changed at this time without triggering updated |
| mounted | Mounting completed: Mount the compiled template to the page (virtual DOM mount), where you can make asynchronous requests and access DOM nodes, and use $ref to operate in vue |
| beforeUpdate | Before updating data: Called before the component data is updated, the data is new, the data on the page is old, the component is about to be updated, and the page is ready to be rendered, the data can be changed at the current stage without causing re-rendering |
| updated | After the component is updated: render re-renders, and the data and interface are new at this time. It should be noted that the data should not be changed during this period, because this may cause an infinite loop of updates |
| beforeDestroy | Before the component is unloaded: Before the instance is destroyed, the instance can be used completely in the current stage, and we can do the finishing work at this time, such as clearing the timer |
| destroyed | After the component is unmounted: The component has been disassembled, the data binding has been removed, the listener has been removed, and all sub-instances have been destroyed. |
| activited | keep-alive exclusive, called when the component is activated |
| deactivated | keep-alive exclusive, called when the component is destroyed |
The life cycle that is triggered on the first render
- beforeCreate() , created()
- beforeMount() , mounted()
The execution order of the first rendering life cycle
- beforeCreate() -> created() -> beforeMount() -> mounted() -> updated()