Life cycle and hook functions in Vue

1. What is the life cycle
2. The life cycle of Vue
3. Lifecycle hook function

1. What is the life cycle

A Vue instance has a complete life cycle, which includes a series of processes such as creation, data initialization, template compilation, Dom mounting, rendering → updating → rendering, and uninstallation. We call this the life cycle of Vue. In simple terms, the process from creation to destruction of a Vue instance is the life cycle.

Throughout the life cycle of Vue, it provides a series of events that allow us to register js methods when events are triggered, allowing us to control the overall situation with our own registered js methods. In these event response methods, this directly points to the vue instance.

2. The life cycle of Vue

Life cycle function, also called hook function (life cycle hook === life cycle function === life cycle event)

The life cycle functions in Vue usually appear in pairs. So we compare them in pairs and see the difference between them.

10 life cycle functions to remember! Specific use!

3. Lifecycle hook function

Features: Automatically called, but their calling time nodes are different.

I took a picture from the official website:

beforeCreate --- "before creation" of the Vue instance. Note: In this function, the data in the data center of Vue cannot be read.

  <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:"Hahaha",
                num:1111
            },
            methods: {
                
            },
 
            // Before the vue instance is created beforeCreate(){
                console.log('beforeCreate');
                console.log(this.name);
            }
    </script>

The name of the output data center cannot be read:

created --- After the vue instance is created, note: in this function, the data in the data center of vue can be identified <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:"Hahaha",
                num:1111
            },
            // After the vue instance is created created(){
                console.log("created");
                console.log(this.name);
            }
        })
    </script>

View the results:

beforeMount --- DOM is mounted this.$el---$el at this time is a "virtual" DOM node

Render the label at the view level:

  <div id="app">
        <p>{{name}}</p>
        <p>{{num}}</p>
    </div>
<script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:"Hahaha",
                num:1111
            },
            //Before dom is mounted beforeMount(){
                console.log("beforeMount");
                   //View DOM elements console.log(document.body.querySelector("#app").innerHTML);
            }
        })
    </script>

Output results before dom mounting:

 mounted --- after DOM is mounted this.$el --- at this time $el is the "real" DOM node <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:"Hahaha",
                num:1111
            },
            // After dom is mounted mounted(){
                console.log("mounted");
                console.log(document.body.querySelector("#app").innerHTML);
            }
        })
    </script>

View the output:

beforeUpdate --- Before data is updated (---- before and after changes in data in the view layer)
updated --- After the data is updated (----the changes before and after the data in the view layer)

In the view layer, click to change the value of num to simulate data update and view the result:

  
    <div id="app">
        <p id="num">{{num}}</p>
        <button @click="num++">Click data update (num+1)</button>
    </div>
  //Before data update beforeUpdate(){
                console.log("beforeUpdate--before data update");
                // View DOM elements console.log(document.body.querySelector("#num").innerHTML);
            },
            //After data is updated updated(){
                console.log("updated--After data updated");
                // View DOM elements console.log(document.body.querySelector("#num").innerHTML);
            }

At this time, when the data does not change, the effect cannot be seen in the console. When we click the button:

This is the end of this article about the life cycle and hook functions in Vue. For more information about the life cycle hook functions in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: