The following is a detailed description of what the Vue life cycle hook function does
Detailed description
(Before creation): Called before instance initialization. At this time, the data observer, the operation of properties and methods of the instance, as well as the event configuration, etc., have been completed, but it has not been mounted on the DOM. In this hook, we can perform some preparations such as data acquisition or variable declaration.
(After creation): Called immediately after the instance is created. In this step, the instance has completed the following configuration: data observer, properties and methods operations, and watch/event listener have been initialized, but has not been mounted to the DOM. In this hook, we can initialize some data in the component.
(Before loading): Called before component mounts. At this step, the Vue instance has compiled the template, but has not been mounted to the DOM. In this hook, we can perform some preparations for calculation or processing of data in components.
(After loading): Called after the component is mounted. In this step, the Vue instance has rendered the virtual DOM compiled into the template to the actual DOM. In this hook, we can perform some initialization or binding of page elements.
(Before update): Called before data is updated. At this step, the data for the Vue instance has been updated, but the virtual DOM has not been re-rendered. In this hook, we can perform some data verification or conditional judgment operations.
(After update): Called after data is updated. In this step, the data of the Vue instance has been updated and the virtual DOM has been re-rendered. In this hook, we can update or refresh some page elements.
(Activation): Called when the component is activated. When a component is reused, for example in a <keep-alive> tag, this hook will be called. In this hook, we can perform some components' activation status setting or data recovery operations.
(Deactivate): Called when the component is deactivated. This hook is called when a component leaves the <keep-alive> tag. In this hook, we can set the deactivation status of some components or save data.
(Before destruction): Called before the instance is destroyed. At this point, the instance is still fully available. In this hook, we can perform some resources release or cleanup operations.
(After destruction): Called after the instance is destroyed. At this point, all sub-instances, event listeners, and event transmitters will be cleaned up. In this hook, we don't need to do anything more.
(Error Capture): Called when an error from a descendant component is caught. This hook receives three parameters: the error object, the component instance where the error occurred, and the complete error stack information. In this hook, we can perform some error processing or logging operations.
Vue lifecycle hook function example
(Before creation): Called before instance initialization. At this time, the data observer, the operation of properties and methods of the instance, as well as the event configuration, etc., have been completed, but it has not been mounted on the DOM.
beforeCreate() {
('beforeCreate');
}
(After creation): Called immediately after the instance is created. In this step, the instance has completed the following configuration: data observer, properties and methods operations, and watch/event listener have been initialized, but has not been mounted to the DOM.
created() {
('created');
}
(Before loading): Called before component mounts. At this step, the Vue instance has compiled the template, but has not been mounted to the DOM.
beforeMount() {
('beforeMount');
}
(After loading): Called after the component is mounted. In this step, the Vue instance has rendered the virtual DOM compiled into the template to the actual DOM.
mounted() {
('mounted');
}
(Before update): Called before data is updated. At this step, the data for the Vue instance has been updated, but the virtual DOM has not been re-rendered.
beforeUpdate() {
('beforeUpdate');
}
(After update): Called after data is updated. In this step, the data of the Vue instance has been updated and the virtual DOM has been re-rendered.
updated() {
('updated');
}
(Activation): Called when the component is activated. When a component is reused, for example in a <keep-alive> tag, this hook will be called.
activated() {
('activated');
}
(Deactivate): Called when the component is deactivated. This hook is called when a component leaves the <keep-alive> tag.
deactivated() {
('deactivated');
}
(Before destruction): Called before the instance is destroyed. At this point, the instance is still fully available.
beforeDestroy() {
('beforeDestroy');
}
(After destruction): Called after the instance is destroyed. At this point, all sub-instances, event listeners, and event transmitters will be cleaned up.
destroyed() {
('destroyed');
}
(Error Capture): Called when an error from a descendant component is caught. This hook receives three parameters: the error object, the component instance where the error occurred, and the complete error stack information.
errorCaptured(err, instance, info) {
('errorCaptured', err, instance, info);
}This is the end of this article about detailed explanation of the use examples of life cycle hook functions in Vue. For more related content of life cycle hook functions, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!