1.Vue’s 8 life cycle functions
beforecreate (before creation) begin to process the instance’s data, calculated properties, methods, watch monitoring properties, etc. at this stage.
2.created (after creation) at this stage calculate the properties of the instance. Methods, watch listening attributes, etc. have been configured, but the component has not yet been mounted.
3.beforeMount (before mounting) the component starts to be mounted on the page.
4.mouted (after mounting) the component mounting has been completed, and ajax requests can be made here. The browser already contains the dom structure of the component. This is also the earliest stage at which the dom can be operated.
5.beforeUpdate (before update) is triggered when the data is updated in the component. At this time, the data has been updated, but the DOM related to the data in the page has not yet been updated.
6.updated (updated) At this time, the page has been updated based on the latest data.
7.beforeDestroy (before destruction) The component is ready to start destruction, but it can still work normally.
8.destroyed (after destruction) The component has been destroyed.
The execution sequence of the initial loading of a component.
When a component is loaded for the first time, four hook functions (life cycle functions) component updates of beforecreate (before creation), created (after creation), beforeMount (before mounting), mounted (after mounting) will be triggered
. The execution order of the life cycle functions.
When the component is updated, the hook function triggered is beforeUpdate --> updated
The execution sequence of life cycle functions when a component is destroyed.
When a component is destroyed, the hook function triggered is beforeDestroy —> destroyed
The life cycle functions of the parent and child components.
The life cycle functions and execution sequence triggered when the parent and child components are loaded for the first time.
Create two components and add the following code.
Parent component // Before the parent component is created,
beforeCreate() { console.log(“The parent component is being created. created"); }, //After the parent component is created created() { console.log("The parent component has been created"); }, //Before the parent component is mounted beforeMount() { console.log("The parent component is being is mounted"); }, //After the parent component is mounted mounted() { console.log("The parent component has been mounted"); }, //Before the parent component is updated beforeUpdate() { console.log("The parent component is mounted" ); The component is being updated"); }, //After the parent component is updated updated() { console.log("The parent component has been updated"); }, //Before the parent component is destroyed beforeDestroy() { console.log("The parent component Component is being destroyed"); },
//After the parent component is destroyed
destroyed() { console.log("The parent component has been destroyed"); }, Child component // Before the child component is created beforeCreate() { console.log("The child component is being created"); }, //After the subcomponent is created created() { console.log("The subcomponent has been created"); }, //Before the subcomponent is mounted beforeMount() { console.log("The subcomponent is being mounted") ; }, //After the subcomponent is mounted mounted() { console.log("The subcomponent has been mounted"); }, //Before the subcomponent is updated beforeUpdate() { console.log("The subcomponent is being updated" ); }, // updated() { console.log("Subcomponent has been updated"); }, // beforeDestroy() { before subcomponent is destroyed
console.log("Subcomponent is being destroyed");
},
//After the subcomponent is destroyed
destroyed() { console.log("Subcomponent has been destroyed"); }, after running the code, it is found that the console outputs the following results : It can be found that the execution order is parent beforeCreate --> parent caeated --> parent beforeMount --> child beforeCreate --> child created --> child beforeMount --> child mounted --> parent mounted statement triggered when the parent-child component is updated. Periodic functions and execution order. Add a data to the parent component, and then define a button. After clicking, a+1 data() { return { a: 1, }; }, it can be seen that the execution order of the hook function when the parent and child component data is updated is: Parent beforeUpdate --> Child beforeUpdate --> Child updated --> Parent updated
The execution sequence of life cycle functions triggered when the parent and child components are destroyed
Parent beforeDestroy --> Child beforeDestroy --> Child destroyed --> Parent destroyed
- Detailed explanation of life cycle methods
Hook function details Scenario notes
beforeCreate After the instance is initialized, the component is created. At this time, el, data, and message are all underfined. You can add the loading event; in server-side application scenarios, more data requests are sent at this time.
created After the instance is created, data and methods are initialized to end the loading event; it is recommended to send the request data at this time, especially when the returned data is related to the binding event beforeMount. Before the initial mount, the
el initialization is completed, and render can also be sent when it is called for the first time. Data requests will not be called during server-side rendering.
mount is completed to obtain the DOM elements in el and perform DOM operations; if the returned data operation relies on DOM completion, it is recommended to send data requests at this time. beofreUpdate will not be called during server-side rendering
. Call before mounting starts. Access the existing DOM before mounting is completed, such as manually removing the added event listener; you can also further modify the data. It will not be called during server rendering. Only the initial rendering will call updated on the server side. Due to the
data Changed, the executable DOM-dependent operation is called when the interface is re-rendered. It will not be called during server-side rendering.
activated keep-alive will not be called during server-side rendering when the component is
activated. deactivated will not be called during server-side rendering when the component is deactivated. Called
beforeDestroy, delete money is called before the instance is destroyed to send a confirmation message; the cleanup timer will not be called during server-side rendering.
destroyed It is called after the instance is destroyed. When called, everything will be unbound, all event listeners will be moved, and the child instance will be destroyed. Hint has been removed. It will not be called during server-side rendering. errorCaptured is called when capturing an error from a descendant component
. Receives three parameters: the error object, the component instance where the error occurred, and a string containing information about the source of the error. False can be returned to prevent the error from propagating further upwards. Modify component status New in 2.5.0
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8"