What are the life cycles of vue3

Vue3 life cycle: 1. beforeCreate; 2. created; 3. beforeMount; 4. mounted; 5. beforeUpdate; 6. updated; 7. beforeDestroy; 8. destroyed; 9. activated; 10. deactivated ; 11. errorCaptured; 12. getDerivedStateFromProps and so on.

Vue 3 introduces new life cycle hook functions, and some old hook functions have been refactored or deleted. The following are some life cycle hook functions of Vue 3:

1. beforeCreate: Called before the instance is created. At this time, it has not been mounted, and the data observer (data observer) and events have not yet been initialized. .

2. created: Called after the instance is created. At this time, the data observation (data observer) and event initialization have been completed, but the DOM has not been mounted yet.

3. beforeMount: Called before mounting, the related render function is called for the first time. The template can be compiled and rendered at this point.

4. mounted: Called after the instance has been mounted on the DOM. At this time, all el and ref have been parsed and $refs has been filled.

5. beforeUpdate: Called when the data is updated, which occurs before the virtual DOM is patched. You can make status updates or manually change the DOM at this point.

6. updated: Called after the data update is completed, which occurs after the virtual DOM is patched and the DOM is updated.

7. beforeDestroy: Called before the instance is destroyed. At this stage, the instance is still fully available.

8. destroyed: Called after the instance is destroyed. After calling, all event listeners and sub-components will be removed, and all sub-component destroy hooks will also be called.

9. activated: Called when the activated keep-alive component re-enters.

10. deactivated: Called when the activated keep-alive component leaves.

11. errorCaptured: Called when handling errors in the capture phase. If this hook does not return a value, or returns false, then the parent component's errorCaptured hook will continue to be called; otherwise, the error will not be further processed.

12. getDerivedStateFromProps: Called before each rendering, used to derive state from props. This is a static method that can be changed before the component is created or after the component is destroyed.

13, renderTracked and renderTriggered: These two hooks are triggered during the rendering process. The former is triggered when tracking rendering, and the latter is triggered when rendering is forced to be triggered.

14. setup: In Vue 3, the component options API is replaced by the Composition API. The setup function is the entry point of the Composition API and is used to organize and reuse component logic. It is a new, more powerful and flexible way to define component options.

The above is the life cycle hook function of Vue 3. It should be noted that since Vue 3 has made a lot of optimizations to the underlying layer, some old hook functions (such as init, ready, etc.) have been removed or merged into other hook functions. At the same time, Vue 3 also adds some new hook functions for optimizing performance and error handling, such as activated, deactivated, errorCaptured, etc.

The above is the detailed content of What are the life cycles of vue3. For more information, please follow other related articles on the PHP Chinese website!