The following is an illustration of the official website, with notes to explain. The more you learn and use it, the more valuable it will become.



All lifecycle hooks bind automatically
thisContext to the instance, so you can access data and perform operations on properties and methods. This means that
You cannot define a lifecycle method using arrow functions(e.g.
created: () => this.fetchTodos()). This is because the arrow function is bound to the parent context, so
thisNot what you’d expect from a Vue instance.


  • beforeCreate

Before instances are created, data in data, methods in Methods, watch, and computed cannot be accessed and printed — all undefined. So the question is: how do you get the data in data during this lifecycle?

Get data asynchronously: this.$nextTick or setTimeout. This is equivalent to telling the container to wait until the entire view is rendered before running the code inside. This way not to take data, take render DOM is OK~

$options. This.$options.data. This.$options.data()[key]. As follows:

export default {
  name: 'App'.data () {
    return {
      b: {
        name: 'clearlove'}}},beforeCreate () {
    console.log(this.$options.data()['b'].'Before instance creation')    //{ name: 'clearlove'} 'Before instance creation'
  }
} 
// this.$options.data is the data function aboveCopy the code

But in practice, you never have to fetch data before the component is initialized…

  • created

The instance has been created and the data and methods in the instance can be used directly, but the DOM nodes are not yet accessible. The $EL attribute is not visible. This phase allows asynchronous requests

<template>
  <div id="app">
    <div id="nav" ref="myDiv"></div>
  </div>
</template>

<script>
export default {
  created () {
    console.log(this.$refs.myDiv, 'Instance creation completed')    // undefined 'Instance creation completed'}}Copy the code

  • beforeMount

The associated render function is called for the first time.

  • mounted

The associated render function is called for the first time. DOM nodes are rendered and DOM operations, such as event listening, can be performed. This phase allows asynchronous requests, but if the parent component is accessing data asynchronously and needs to pass it to the child component using props, then asynchronous requests are made in Created. See the parent component lifecycle below for details

  • beforeUpdate

Called when data is updated and occurs before the virtual DOM is patched. This is a good place to access the existing DOM before updating, such as manually removing event listeners that have been added. Data can be modified without triggering additional flush rendering. The $EL object here has been modified, but the data on the page has not changed.

  • updated

The data on the DOM structure has been updated. If data is modified again, beforeUpdate and updated are triggered again to enter an endless loop.

  • beforeDestroy

Called before the instance is destroyed, which means the instance can still be called at this stage.

The destruction of the instance, the VUE instance still exists, just unbinds the event listener and the data and the view binding, namely the data drive.

  • destroyed

Called after the instance has been destroyed. All event listeners have been removed and the subinstance has been destroyed.

Here’s a quick look at the parent component lifecycle:

  • Loading the rendering process:

Parent beforeCreate-> Parent created-> parent beforeMount-> child beforeCreate-> child created-> child beforeMount-> Child Mounted -> parent Mounted

  • Sub-component update process:

Parent beforeUpdate-> Child beforeUpdate-> Child updated-> Parent updated

  • Parent component update process:

Father father beforeUpdate – > updated

  • Destruction process:

Parent beforeDestroy-> Child beforeDestroy-> Child destroyed-> Parent destroyed

conclusion

Vue’s lifecycle functions provide very convenient operations for developers. However, it is very important to make good use of the life cycle of Vue. It greatly reduces the number of bugs we develop on a daily basis.

It is important to note that data retrieval is an asynchronous process, while life cycle functions run independently! When it comes to DOM updates, we recommend using Vue’s built-in $nextTick method. The idea behind this method is to defer operations within the callback function until the next DOM update loop. Vue itself puts all DOM updates in a queue, and $nextTick delays the callback function until the next DOM update in the queue.