Introduction to Vue life cycle and detailed explanation of hook functions

Introduction to Vue life cycle and detailed explanation of hook functions

Vue life cycle introduction and hook function

The internal structure of a component is different in each phase, so generally specific hooks do specific things, such as Ajax data acquisition in the mounted phase. The entire process from the creation of the Vue instance to the final destruction of the instance is called the VUE life cycle. The following things happen during this life cycle: starting from the creation of the Vue instance, the Vue instance is first created, then the data is initialized, the template is compiled, the DOM is mounted, the DOM is rendered, the object properties are updated, the DOM is rendered, and the binding is untied and destroyed.

VUE life cycle hooks

Lifecycle hooks are also called lifecycle time, lifecycle function, and lifecycle hooks are various events triggered in the vue lifecycle. These events are called lifecycle hooks. In the vue lifecycle, most of them are divided into four stages: creation, hanging, update, and destruction. These four stages each correspond to two lifecycle hooks.

1. The creation part (create) is when the Vue instance is initialized. Simply put, we perform this operation in the code var app = new Vue(), and then enter the creation phase of the Vue life cycle. In the creation phase, there will be two programming interfaces provided to us, namely beforeCreate and created. Both interfaces are triggered in the creation phase, but there are some differences between the two interfaces. beforeCreate is triggered earlier than created, that is, it is triggered after the vue instance is initialized and before data is read. If the data in data is read at this time, it will prompt unfined. created is called after the instance is created. At this time, the data in data has been written, but the DOM has not been mounted yet, so it has not been associated with the page. Now enter the mounting stage.

2. Mounting phase (mount): This phase is to mount the DOM in the page to the instantiated Vue object. Simply put, el: '#dom' is executed. At this stage, there are also two interfaces for us to program, namely beforemount and mounted. The main difference between these two interfaces is whether the DOM is mounted on the instance object. Beforemount is triggered before mounting and only the template is parsed. If the innerHTML of the DOM that needs to be mounted is output at this time, the template will be output as is without rendering the data. After mounted, the data in data can be rendered on the page. This phase is followed by the update phase.

3. Update phase: This phase is when the data on the page is updated again after the first load. It also corresponds to two interfaces: beforeupdate and update. The main difference between these two interfaces lies in whether the page DOM is rendered. When we modify the data in data and trigger beforeupdate after the modification is completed, the attribute value in data has been modified, but the DOM of the page has not been rendered. Update is to render the data on the page. At this point, the life cycle of Vue has reached the update stage. In normal use, we will often be in the update stage many times and make various modifications to the data on the page. However, in order to close unnecessary events and release memory, a destruction phase is required.
Fourth, the destruction phase (destory), after an instance is destroyed, all events bound to the instance will become invalid and the listeners will be removed. This phase corresponds to two interfaces: beforeDestroy and destroy. deforeDestory is called before the instance needs to be destroyed but has not yet been called. At this time, various events and listeners bound to the instance are still available. destroy is called after the instance is destroyed. At this time, everything in the instance cannot be used, but the data on the page still maintains the data of the last rendering of the page.

Introduction to Vue Lifecycle

insert image description here

insert image description here

The stages described above

Using code observation hook function

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
 <div id="app">
     <p>{{ message }}</p>
</div>
 <script type="text/javascript">
   var app = new Vue({
      el: '#app',
      data: {
          message: "xuxiao is boy" 
      },
       beforeCreate: function () {
                console.group('beforeCreate Status before creation ===============》');
               console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
               console.log("%c%s", "color:red","data : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  
        },
        created: function () {
            console.group('created Creation completed status ===============》');
            console.log("%c%s", "color:red","el : " + this.$el); //undefined
               console.log("%c%s", "color:red","data : " + this.$data); //has been initializedconsole.log("%c%s", "color:red","message: " + this.message); //has been initialized},
        beforeMount: function () {
            console.group('beforeMount Status before mounting ===============》');
            console.log("%c%s", "color:red","el : " + (this.$el)); //Initialized console.log(this.$el);
               console.log("%c%s", "color:red","data : " + this.$data); //has been initializedconsole.log("%c%s", "color:red","message: " + this.message); //has been initialized},
        mounted: function () {
            console.group('mounted Mounting end status ===============》');
            console.log("%c%s", "color:red","el : " + this.$el); //Initialized console.log(this.$el);    
               console.log("%c%s", "color:red","data : " + this.$data); //has been initializedconsole.log("%c%s", "color:red","message: " + this.message); //has been initialized},
        beforeUpdate: function () {
            console.group('beforeUpdate Status before update ===============》');
            console.log("%c%s", "color:red","el : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated Update completed status ===============》');
            console.log("%c%s", "color:red","el : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy state before destruction ===============》');
            console.log("%c%s", "color:red","el : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed Destruction completed status ===============》');
            console.log("%c%s", "color:red","el : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

create and mounted related

beforecreated： el and data are not initialized

created: completed the initialization of data data, el has no

beforeMount： Completed el and data initialization

mounted ： Completed mounting

In addition, in the red area, we can find that el is still {{message}}. This is where the Virtual DOM (virtual Dom) technology is applied, which occupies the pit first. The value will be rendered when it is mounted later.

insert image description here

update related

insert image description here

destroy

Regarding destruction, it is not very clear yet. We execute the command in the console to destroy the Vue instance. After the destruction is completed, we change the value of message again, and Vue will no longer respond to this action. However, the originally generated DOM elements still exist. It can be understood that after the destroy operation is executed, they will no longer be controlled by Vue.

insert image description here

Summarize

beforecreate : For example, you can add a loading event here

created ： This is where loading ends, and some initialization is done to make the function self-executing

mounted ： initiate a backend request here, retrieve data, and do something with the routing hook

beforeDestory： Are you sure you want to delete XX? destoryed: The current component has been deleted and the related content is cleared

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:
  • Life cycle and hook functions in Vue
  • Detailed explanation of Vue3 life cycle hook function
  • How many stages are there in the Vue life cycle? What are the differences?
  • Let's talk about the vue life cycle hook functions and when they are triggered

<<:  How to modify the port mapping of a running Docker container

>>:  Example of stars for CSS rating effect

Recommend

Native JS to implement image carousel JS to implement small advertising plug-in

Recently I want to use native JS to implement som...

Tutorial on reinstalling MySQL on Windows 64-bit (Zip version, decompressed version MySQL installation)

Uninstall MySQL 1. In the control panel, uninstal...

How to install docker using YUM

As shown in the following figure: If the version ...

mysqldump parameters you may not know

In the previous article, it was mentioned that th...

MySQL 8.0.15 installation graphic tutorial and database basics

MySQL software installation and database basics a...

Examples of implementing progress bars and order progress bars using CSS

The preparation for the final exams in the past h...

Design theory: people-oriented green design

Reflections on the two viewpoints of “people-orie...

How to configure tomcat server for eclipse and IDEA

tomcat server configuration When everyone is lear...

JS implements Baidu search box

This article example shares the specific code of ...

Sending emails in html is easy with Mailto

Recently, I added a click-to-send email function t...

Solution to the problem that crontab output redirection does not take effect in Linux

question In LINUX, periodic tasks are usually han...

A Brief Analysis of MySQL Connections and Collections

Join query A join query refers to a matching quer...

jQuery implements accordion small case

This article shares the specific code of jQuery t...

VMwarea virtual machine installation win7 operating system tutorial diagram

The installation process of VMwarea will not be d...

Linux five-step build kernel tree

Table of contents 0. The kernel tree that comes w...