Lifecycle hook

Life cycle: Each Vue instance goes through a series of initialization steps. From setting up the data at creation time to compiling the template, loading the instance into the DOM, and finally updating the DOM during data changes. This process is called the lifecycle of a Vue instance,

Lifecycle hook functions (lifecycle functions for short) refer to functions triggered by the creation, update, and destruction phases of a component. According to the hook function triggered by each phase, we can do some operations accordingly, such as fetching back-end interface data, listening to events, executing events, executing timers, removing events, cleaning timers, and so on.

Vue has eight lifecycle approaches:

BeforeCreate is called after instance initialization and before data Observer and Watch configuration

Created instance is called after it is created. In this step, data observation, property and method operation and callback of watch event have been completed, but it has not been mounted yet

BeforeMount is called before mounting begins, creating the virtual DOM

Mounted mounts the virtual DOM to the real DOM. In the Created file, the DOM element object is retrieved. AJAX requests are sent in this file or in the Created file

BeforeUpdate This function is triggered when data changes

Updated is invoked after data changes cause the virtual DOM to be re-rendered and patched

BeforeDestory is called before the instance is destroyed, and is cleared in this hook function if there is a timer in the page

Called after the Destroyed instance is destroyed, the watch whose property in the instance is no longer the response is removed

// Run this code
new Vue({
	el:"app",})// Or this code
new Vue({
 render: h= >H (App),}) $mount (' # ') AppCopy the code

Equivalent to running this code

new Vue({
  el: "#app".beforeCreate: function() {
    console.log("Called beforeCreate");
  },
  created: function() {
    console.log("Call created");
  },
  beforeMount: function() {
    console.log("Called beforeMount");
  },
  mounted: function() {
    console.log("Mounted"); }});// Output the result
// Call beforeCreate
// created is called
BeforeMount is called
// Mounted is invoked

Copy the code

beforeCreate

This is the first lifecycle hook called in vue.js, and it is called immediately after the Vue instance is initialized.

At this point, it is in the beforeCreate phase, and the calculation properties, observers, events, data properties, and operations have not yet been set.

created

This is the second lifecycle hook called immediately after the beforeCreated hook. At this stage, the Vue instance is initialized, and the calculated properties, observers, events, data properties, and subsequent operations have been activated.

If you run the program, you will see that the data types can now be displayed. This is not possible during the beforeCreated phase because the activation that occurs at this point has not yet occurred. However, the Vue instance is not installed at this stage, so you cannot manipulate the DOM here, and element attributes are not yet available.

beforeMount

This is the moment before the instance is mounted on the DOM, where the template and scoped styles are compiled, but you still can’t manipulate the DOM, and element attributes are still unavailable.

mounted

This is the next lifecycle hook called after beforeMounted. It is called immediately after the instance is installed. Now the APP component or any other component in the project can be used. You can now do things like data-fit templates, replace DOM elements with data-fill elements, and element attributes are now available.

beforeUpdate

This is where you make changes to the data that you need to update the DOM. This stage is appropriate for any logic until changes such as deleting event listeners are made.

updated

This lifecycle hook is called immediately after the DOM update and is executed after calling the beforeUpdate hook. Dom-related operations can be performed here, but it is not recommended to change the state within this hook because Vue already provides a platform specifically for this.

beforeDestory

The time to call this Vue lifecycle hook is before the Vue instance is destroyed, while the instance and all functions are still intact and working here. At this stage you can perform resource management, delete variables, and clean up components.

destroyed

This is the final phase of the Vue life cycle, where all child Vue instances have been destroyed and things like event listeners and all instructions have been unbound. Call destroy after you run it on the object.