Today, there are also very hard to earn cat food money

If there are mistakes or deficiencies in the article, please understand and help me to point out, thank you very much

A full VUE life cycle goes through the following hook functions

There are four phases (which can be interpreted as the life, age, sickness, and death of a component) and eight hook functions

BeforeCreate -- Before creation created -- Created complete. BeforeMount -- Before mounting mounted -- Mounted complete. BeforeUpdate -- Before updating -- Updated -- Updated -- Updated BeforeDestroy - Destroyed before destruction - Destruction is completedCopy the code

BeforeCreate is the first hook fired after new Vue(), the start of a component’s life, and data and methods on data, methods, computed, and watch cannot be accessed in the current phase.

In the Created phase, the instance has been created, the data has been observed, the data can be used, and the data can be changed. Changing the data here does not trigger the updated function.

Let’s look at the code

  • HTML
<template>
 <div id="app">
    <h1 ref="hello" id="hello">{{message}}</h1>
    <button @click="changeMsg">change</button>
 </div>
</template>
Copy the code
  • DATA
  data () {
    return {
      message: 'Juanjuan and her three kittens'}},Copy the code
  • js
    beforeCreate: function() {
      console.group('------beforeCreat created before ------');
      console.log("%c%s"."color: green"."data : " + this.$data); 
      console.log("%c%s"."color: green"."message: " + this.message);  
    },
    created: function() {
      console.group('------created created ------');
      console.log("%c%s"."color: green"."data : " + this.$data); 
      console.log("%c%s"."color: green"."message: " + this.message);  
      let hello = document.getElementById('hello')
      console.log('hello:',hello)
    },
Copy the code

Take a look at the console print result, is it very intuitive

BeforeMount occurs before mounting, before the template template is imported into the rendering function compiled. At this stage, the virtual Dom has been created and is about to start rendering. Data can also be changed at this point without triggering the updated.

Mounted Occurs after the Dom is mounted. In this stage, the Dom is mounted and data is bidirectional bound. You can access the Dom node and use the $refs attribute to operate the Dom.

Let’s look at the code

      beforeMount: function() {
      console.group('------beforeMount beforeMount ------');
      console.log(this.$el);
      console.log("%c%s"."color:green"."data : " + this.$data); // has been initialized
      console.log("%c%s"."color:green"."message: " + this.message); // has been initialized
      let hello = document.getElementById('hello')
      console.log('hello:',hello)
    },
      mounted: function() {
      console.group('------ Mounted complete ------');
      console.log(this.$el);
      console.log("%c%s"."color:green"."data : " + this.$data); 
      console.log("%c%s"."color:green"."message: " + this.message); 
      let hello = document.getElementById('hello')
      console.log('hello:',hello)
    },
Copy the code

BeforeUpdate is triggered before updates, when reactive data is updated and the virtual DOM is re-rendered. You can make changes to data at this stage without re-rendering.

Updated occurs after the update is complete, and the component Dom is updated in the current phase. It is important to avoid changing the data during this period, as this may result in an infinite loop of updates.

BeforeDestroy occurs before the instance is destroyed, in the current phase the instance is fully available and we can clean up after things like timers, variables, methods, etc. that may cause memory leaks, variable contamination, etc

The Destroyed occurs after the instance is destroyed, at which point only the DOM shell is left. Components are disassembled, data bindings are removed, listeners are removed, and subinstances are destroyed.

If you use the keep-alive function of a component, add two cycles:

Activated is called when the keep-alive component is activated.

Deactivated is invoked when the keep-alive component is disabled.


when wrapping dynamic components, inactive component instances are cached rather than destroyed.

is an abstract component that does not render a DOM element on its own and does not appear in the parent component chain. When a component is switched within

, its activated and deactivated lifecycle hook functions are executed.


Now that I’ve talked so much about the life cycle by the way, let’s talk a little bit about life cycle changes in vue3

Vue3. X Life cycle changes

Be replaced

  • beforeCreate -> setup()

  • created -> setup()

rename

  • beforeMount -> onBeforeMount

  • mounted -> onMounted

  • beforeUpdate -> onBeforeUpdate

  • updated -> onUpdated

  • beforeDestroy -> onBeforeUnmount

  • destroyed -> onUnmounted

  • errorCaptured -> onErrorCaptured

The addition of

Add the following two callback hooks to facilitate debugging:

  • onRenderTracked

  • onRenderTriggered

Check out the official API

X is compatible with the syntax of vue2. x, so the syntax of vue2. x can run normally in vue3. x. Although beforeCreate and created are replaced by the setup() function, the code will execute normally if you want to use them. It is only recommended to use setup() in vue3.x instead of the old API, however, there will be no beforeDestroy and destroyed in vue3.x after the following 2 lifecycle hook functions are renamed

  • beforeDestroy -> onBeforeUnmount

  • destroyed -> onUnmounted

Have a deep understanding of the lifecycle, such as which phases API requests are typically placed in, the differences between data, method, DOM, and what makes each phase special. Do not blindly recite 8 life hooks.