In Vue 3, the commonly used life cycle functions are as follows:
1.setup
The setup function is a newly added life cycle function in Vue 3, which is called before the component is instantiated. It receives props, context, and a reactive return value, and can return an object containing state and event handlers.
2.beforeCreate
In Vue 3, the beforeCreate lifecycle function has been abandoned and the setup function is used instead.
3.created
Called immediately after the component instance is created. At this time, the component has not been mounted in the DOM, so the $el attribute cannot be accessed. Under normal circumstances, operations such as data initialization and asynchronous data request are performed in the created hook function.
4.beforeMount
Called before the component is mounted to the DOM. At this point, the template is compiled and the $el property is accessible, but has not yet been rendered to the page.
5.mounted
Called after the component is mounted to the DOM. At this point, the component has been rendered to the page and the $el property is accessible. Under normal circumstances, some operations that require access to DOM elements are performed in the mounted hook function, such as obtaining the element size, binding events to the element, etc.
6.beforeUpdate
Called before the component is updated. At this point, the virtual DOM has been generated and ready to render, but re-rendering has not yet started.
7.updated
Called after the component is updated. At this point, the component has been re-rendered to the page. Under normal circumstances, some operations that require access to DOM elements are performed in the updated hook function, such as obtaining element dimensions, binding events to elements, etc.
8.beforeUnmount
Called before the component is unloaded. At this point, the component instance is still fully available.
9.unmounted
Called after the component is unloaded. At this point, the component instance no longer exists. In this hook function, you can perform some cleaning work, such as canceling timers, destroying event listeners, etc.
In addition to the above commonly used life cycle functions, Vue 3 also provides some other life cycle functions, such as errorCaptured, renderTracked, renderTriggered, etc.