What is vue's life cycle hook function

In vue, the life cycle hook function refers to some functions that will run in the life cycle when it goes through the process of creating and updating the DOM; vue components can be created and declared inside these functions.

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

What is vue’s life cycle hook function

Each Vue instance goes through a series of initialization steps. From setting the data on creation to compiling the template, loading the instance into the DOM, and finally updating the DOM during data changes. This process is called the life cycle of a Vue instance. By default, as they go through the process of creating and updating the DOM, some functions are run within them. Within these functions, Vue components are created and declared. These functions are called the life cycle. hook.

Vue has eight life cycle methods:

• Before create

• Created

• Before mount

• Mounted

• Before update

• Updated

• Before destroyed

• Destroyed

In this article, you will learn about all these hooks and learn each of them case at each stage.

This article will use the test component, which is located in the components folder within the src folder. It should look like this:

// src/components/Test.vue
<template>
 <div>
 </div>
</template>
<script>
export default {
 name: ‘Test’,
 props: {
  msg: String
 }
}
</script>
<! — Add “scoped” attribute to limit CSS to this component only →
<style scoped>
h3 {
 margin: 40px 0 0;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

In this tutorial, the script section will be used separately for various hook cases.

beforeCreate()

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

<script>
export default {
  name: &#39;Test&#39;,
  beforeCreate() {
    alert(&#39;beforCreate hook has been called&#39;);
    console.log(&#39;beforCreate hook has been called&#39;);
  }
}
</script>

You can run the program in the development environment to inspect the interface.

npm run serve

Note that before loading the component, the alert statement written in the life cycle hook is first executed. This is exactly how the function behaves when called before the Vue engine creates the application component. At this time, it is in the beforeCreate stage, and calculated properties, observers, events, data properties, operations, etc. have not yet been set.

created()

As you might guess, this is the second lifecycle hook that is called immediately after the beforeCreated hook. At this stage, the Vue instance has been initialized and has computed properties, observers, events, data properties and subsequent operations activated.

<script>
export default {
  name: &#39;Test&#39;,
  data() {
    return {
      books: 0
    }
    },
  created() {
    alert(&#39;Created hook has been called&#39;);
    console.log(`books is of type ${typeof this.books}`);
  }
}
</script>

If you run the program, you will find that the data types are now displayed. This is not possible in the beforeCreated phase because the activation that occurs then has not yet occurred. But the Vue instance is not installed at this stage, so you cannot manipulate the DOM here, element properties are not available yet.

beforeMount()

This is the moment before the instance is mounted on the DOM. Templates and scoped styles are compiled here, but you still cannot manipulate the DOM. , element properties are still unavailable.

<script>
export default {
  beforeMount() {
    alert(&#39;beforeMount is called&#39;)
  }
}
</script>

mounted()

This is the next lifecycle hook called after beforeMounted. It is called immediately after the instance is installed. Now the app component or other components in the project can be used. It is now possible to perform operations such as fitting data to templates, replacing DOM elements with data-filled elements, and element attributes are now available.

<script>
export default {
  mounted() {
    alert(&#39;mounted has been called&#39;); 
   }
}
</script>

This is the default location for projects created using the Vue CLI because, as we saw at the beginning, the installation is already done in the main.js file. This is why you may not be able to use other hooks, since the instance is already installed for you by default.

beforeUpdate()

Make changes to the data that needs to be updated in the DOM here. This stage is suitable for any logic before making changes such as removing event listeners.

<template>
 <div> {{hello}}
 </div>
</template>
<script>
 export default {
  name: &#39;Test&#39;,
  data() {
   return {
    books: 0,
    hello: &#39;welcome to Vue JS&#39;
   }
 },
beforeUpdate(){
 alert(&#39;beforeUpdate hook has been called&#39;);
},
mounted(){
 this.$data.hello= &#39;lalalalallalalalalaalal&#39;;
 }
}
</script>

Initially there is a welcome comment on the DOM, but during the mount phase (where the DOM can be manipulated), the data changes, so the beforeUpdate alert appears before the change.

updated()

This lifecycle hook is called immediately after an update to the DOM. It is executed after the beforeUpdate hook is called. It is possible to perform DOM-related operations here, but changing the state within this hook is not recommended as Vue already provides a platform specifically for this.

<template>
 <div> {{hello}}
 </div>
</template>
<script>
 export default {
  name: &#39;Test&#39;,
  data() {
   return {
    books: 0,
    hello: &#39;welcome to Vue JS&#39;
   }
  },
beforeUpdate(){
 alert(&#39;beforeUpdate hook has been called&#39;);
},
updated(){
 alert(&#39;Updated hook has been called&#39;);
},
mounted(){
 this.$data.hello= &#39;lalalalallalalalalaalal&#39;;
 }
}
</script>

beforeDestroy()

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

<script>
export default {
name: &#39;Test&#39;,
 data() {
    return {
      books: 0
    }
  },
  beforeDestroy() {
    this.books = null
    delete this.books
  }
}
</script>

destroyed()

This is the final stage of the Vue life cycle, in which all child Vue instances have been destroyed, event listeners and all instructions and the like The stuff has been unbound at this stage. Call this after running destroy on the object.

<script>
export default {
  destroyed() {
    this.$destroy() 
    console.log(this)
  }
}
</script>

When you run the program and look at the console, you won't see anything.

[Related recommendations: "vue.js Tutorial"]

The above is the detailed content of What is vue's life cycle hook function. For more information, please follow other related articles on the PHP Chinese website!