preface

I remember Youda once said, why do you look at Vue source code? You don't need its source code to use Vue. You just need to be able to use it!

But we have to roll. How can we stand out if we don't roll 😥， I still remember that in this year's Blue Bridge Cup group, there are friends who don't know which university are already reading the source code of Vue/React/Node... As a chicken, I watched the big guys talk and tremble in the corner of the group.

Recently, I reviewed Vue's knowledge on Niuke and sorted out this article. First, it is convenient for me to review in the future. Second, I hope to help some friends like me review some knowledge points and learn it's never too late.

This article will talk about:

• What is the life cycle of Vue
• Execution sequence of Vue life cycle
• What is appropriate for each stage of the life cycle
• Which life cycle would be more appropriate for our request

Of course, I will only talk about my understanding of emm, which may be very shallow. Please forgive me.

What is the life cycle of Vue?

It's not so much the life cycle of Vue as the life cycle of its components. In short, its life cycle is used to describe the whole process of a component from introduction to exit. What about complexity? A component starts from creation, goes through data initialization, mounting, updating and other steps, and is finally destroyed.

Execution sequence of Vue life cycle

He is divided into three major stages as a whole. Among the three major stages, there are several small stages. We can do different things at different stages. Later, we will also talk about what specific things are suitable for us at different stages.

Let's take a look at the execution sequence:

There are two ways, one is Vue's official documentation There is a diagram above that specifically explains the life cycle, but since many partners may be like me, reading English documents must be accompanied by the level of translation, so I specially found a translated Chinese version on the Internet and put it here for your reference:

This figure explains in detail the whole process from creation to destruction of a Vue instance.

The second method is to print in the Vue project. We can clearly see who executes early and who executes late in the console, and even see the difference between them:

beforeCreate: function () {
        console.group('------beforeCreate Pre creation status------');
        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 Create complete status------');
        console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
        console.log("%c%s", "color:red", "data   : " + this.$data); //Has been initialized 
        console.dir(this.$data)
        console.log("%c%s", "color:red", "message: " + this.message); //Has been initialized
    },
    beforeMount: function () {
        console.group('------beforeMount Pre mount status------');
        console.log("%c%s", "color:red", "el     : " + (this.$el)); //undefined
        console.dir(this.$el)
        console.log("%c%s", "color:red", "data   : " + this.$data); //Has been initialized  
        console.log("%c%s", "color:red", "message: " + this.message); //Has been initialized  
    },
    mounted: function () {
        console.group('------mounted Mount end status------');
        console.log("%c%s", "color:red", "el     : " + this.$el); //Has been initialized
        console.dir(this.$el)
        console.log("%c%s", "color:red", "data   : " + this.$data); //Has been initialized
        console.dir(this.$data)
        console.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.dir(this.$el)
        console.log("%c%s", "color:red", "data   : " + this.$data);
        console.dir(this.$data)
        console.log("%c%s", "color:red", "message: " + this.message);
    },
    updated: function () {
        console.group('updated Update completion status===============>');
        console.log("%c%s", "color:red", "el     : " + this.$el);
        console.dir(this.$el)
        console.log("%c%s", "color:red", "data   : " + this.$data);
        console.dir(this.$data)
        console.log("%c%s", "color:red", "message: " + this.message);
    },
    beforeDestroy: function () {
        console.group('beforeDestroy Status before destruction===============>');
        console.log("%c%s", "color:red", "el     : " + this.$el);
         console.dir(this.$el)
        console.log("%c%s", "color:red", "data   : " + this.$data);
        console.dir(this.$data)
        console.log("%c%s", "color:red", "message: " + this.message);
    },
    destroyed: function () {
        console.group('destroyed Destroy complete status===============>');
        console.log("%c%s", "color:red", "el     : " + this.$el);
         console.dir(this.$el)
        console.log("%c%s", "color:red", "data   : " + this.$data);
        console.dir(this.$data)
        console.log("%c%s", "color:red", "message: " + this.message)
    }
Copy code

Mount phase

In fact, the sequence of this code is the sequence of its execution. In order to have the update status, I found a todolist demo that can be added and deleted for our convenience. First, I just entered the page:

We can see that beforeCreate is the first, and in this state, we can't get anything from the printed information.

Then it enters the created state. In this state, our el, that is, Dom elements are still unavailable, but we can get the data, which means that created has loaded the data and opened up memory space for the Vue instance.

beforeMount, the state before mounting. In my understanding, mounting is the process of transforming a virtual Dom into a real Dom, so before that, of course, our el can't get it.

Mounted means that the virtual Dom has been mounted on the real element, so we can get the el from now on. We can use console.dir to print the attributes of some elements we need.

At this point, our mount phase is over.

Update phase

Let's delete a list and take a look at the update status.

Whenever we change the page elements, we will enter the update phase, that is, before update and updated.

Destruction phase

Let's take a look at the final destruction stage.

beforeDestroy, the state before destruction, before destruction, so our elements and data can be printed as in the stage after mounting.

Destroyed, in fact, what shocked me most was the state of destruction. I thought that if it was destroyed, nothing could be printed. In fact, it was not. It could still print everything.

Before destroy and destroyed are the life cycles that are called only when we leave this component.

What is appropriate for each stage of the life cycle

Let's talk about what we can do at different stages:

Created: when the Vue instance is created, we can access the methods and data on data, computed, watch and methods. However, the virtual Dom has not been mounted on the real Dom, so we can't access our Dom elements at this time (el attribute and ref attribute are empty at this time).

At this time, we can do some simple Ajax and initialize the page

beforeMount: it is called before mounting. At this time, you will find the virtual Dom and compile it into Render

Mounted: the virtual Dom has been mounted on the real Dom. At this time, we can obtain the Dom node, and $ref can also be accessed at this time.

At this time, we can get the node information, make Ajax requests, and do some operations on the node

Before update: it will be called when the responsive data is updated. In the before update phase, the virtual Dom has not been updated, so you can still access the existing Dom at this time.

We can access the existing Dom at this time and manually remove some added listening events

Updated: at this time, the patch has been completed and the Dom has been updated. You can perform some operations that depend on the new Dom.

However, it is not recommended to conduct data operation at this time to avoid entering the dead cycle (I have stepped on this pit)

beforeDestroy: called before the Vue instance is destroyed. At this time, our instance has not been destroyed.

At this time, you can do some operations, such as destroying timers, unbinding global events, destroying plug-in objects, etc

Lifecycle of parent-child components

What I just said is a single page, so what will the life cycle of parent-child components look like? Let's just make a simple supplement.

I wonder if you noticed these two lines in the figure just now:

The small li in our page is a sub component embedded in the large page. We also print its life cycle:

created() {
        console.log('list created')
    },
    mounted() {
        console.log('list mounted')
    },
    beforeUpdate() {
        console.log('list before update')
    },
    updated() {
        console.log('list updated')
    },
    beforeDestroy() {
        // Destroy it in time, otherwise it may cause memory leakage
        console.log('list beforeDestroy')
    },
    destroyed(){
        console.log('list Destroy')
    }
Copy code

It can be seen that the child component has been mounted before the parent component is mounted.

Not only the mount phase, but also the other two phases can be printed, but I won't elaborate here. Let's directly draw a conclusion:

• Mount phase: parent component beforemount - > child component created - > child component mounted - > parent component mounted
• Update phase: parent component BeforeUpdate - > child component beforeupdated - > child component updated - > parent component updated
• Destruction stage: parent component beforedestroy - > child component beforedestroy - > child component destroyed - > parent component destroyed

Which life cycle would be more appropriate for our request

So far, we have a basic understanding of the life cycle of Vue. Now let's say which life cycle our request should be placed in.

Generally speaking, there are two answers: created and mounted. As mentioned above, the former is that the data is ready, and the latter is that the dom has been loaded. So which is the correct answer?

In fact, both are OK, but mounted will be better.

Some people may say: the created time will be earlier. Wouldn't calling earlier save a lot of time? Will the performance be higher

Don't worry, let's look at it bit by bit

• First, it's really early, but it's not a few microseconds early, so it doesn't actually improve performance
• Secondly, we didn't do rendering in the created phase, so we will do Dom rendering next. However, if we also do Ajax operation at this time, the data will be returned after the end of Ajax, and we will insert it into the main thread to run and process the data. However, we should know that in the browser mechanism, the rendering thread and js thread are mutually exclusive, Therefore, it is possible that while rendering, the other side may have to process the data returned by Ajax. At this time, the rendering may be interrupted. After processing the array, re render it.

What if there are multiple Ajax in created? We have to render again, so it is obviously inappropriate to make Ajax requests in created.

• In addition, sometimes when we receive the returned data, we may need to perform some Dom operations in the callback function, but we haven't loaded the real Dom in the created stage, so it's better to call it in mounted

If it is a server-side rendering, we put it into created because the server-side does not support mounted.

If you think this article is a little helpful to you, give it a compliment. Or you can join my development exchange group: 1025263163 learn from each other, and we will have professional technical Q & A to solve doubts

If you think this article is useful to you, please click star:   https://gitee.com/ZhongBangKeJi/CRMEB esteem it a favor  !