What is the lifecycle execution flow for parent and child components?

One of the most common interview questions in VUE is the vUE lifecycle.

5K a month

beforeCreate=>created=>beforeMount=>mounted=> beforeUpdate=>updated=>beforeDestroy=>destroyed

Those with a bit of experience can barely pull together the two life cycles of Keep-Alive:

Activated and deactivated

Body:

We all know the vue is componentized development thought, the following to throw our daily developing one of the most common business scenarios, such as an edit function is as follows: there are two components, the parent component nesting child components, there is a drop-down in child components selection box, we in the parent component inside the backend interface to get the data, to the child components, rendering the page. How did you do it?

First, wrong writing:

In Created, the parent component gets the data and assigns it to the data object, which is then passed to the child component via prop. The child component receives and processes the data in Created and renders it to the page.

For component communication, check out this article if you want to take a remedial course.

8 ways for components to communicate, have you figured it out?

Here’s an example of this:

The parent component:

Child components:

Sub-component data:

To handle the data passed by the parent in child ceated:

Page effect:

The page shows the city corresponding to the enumeration value 5: Xiamen.

A lot of people are thinking: gee, didn’t you say that was a mistake? Isn’t that what we want? I also write like this at ordinary times, have no problem!!

Don’t worry, did we miss something?? I was talking about getting data from the back end, getting data from the back end and our data being affected by the network and so forth, what does that mean? That means there will be asynchronous generation.

We use setTimeout to simulate an asynchronous request.

This time we will find that our page is not selected, usually all like this, is there will be a bug, because our data is restricted by factors such as network, when the back-end data returned by the faster we may the page shows the data properly, but when the back-end data returned by the slower, we won’t be able to normal page to display the data, There will be a bug, and this kind of bug is not necessary, some students will feel very weird. By the way, in addition to network factors, the component is not destroyed when it is controlled by V-show. It only goes through the first created life cycle. For example, if you click multiple data edit buttons, the previous data may appear. When we need to edit, the last value is empty, and then get the corresponding value assignment

So what’s the solution? We all know that the initial render life cycle of a single component is:

beforeCreate=>created=>beforeMount=>mounted

What about the life cycle of the parent and child components?

Cut the crap, console:

We found the lifecycle execution flow for the parent component: the parent component executed the first three lifecycles: BeforeCreate => Created =>beforeMounted. BeforeCreate => Created =>create =>beforeMount=> Mounted. Then the parent component executes mountedued

The parent component executes the Created lifecycle first, and then the child component executes the Created lifecycle, and then the child component mounts the Created lifecycle. It is ok to pass values in the parent component through props, and process data in the child component Created. Our life cycle doesn’t wait for our asynchronous request, so Yuxi wasn’t that stupid when they designed vUE performance.

By the way, Yuxi knows a hammer vue! Somebody, hold Yuxi down for me!! Two days ago, I heard him talk about the ecology of VUe3 live. In the recent one or two months, he will forcibly update the official website of VUE to vue3.

Back to business:

We simulate an asynchronous request in the parent component’s Created:

Print this enumeration value in created inside the parent component and open the console to see the result:

We find that neither the parent nor the child can get our enumeration value 6

What should we do if we want to get the enumeration value 6 in the child component and render it on the page?

Two, pheasant writing:

At this point, some students may think that we can solve the bug as long as we get this value in the child component, so can we use V-if to rebuild the Vue instance? Thus interrupting the original lifecycle execution of our parent and child components. Render the subcomponent when value exists

Open the console to see the results, we found a father and son of the component lifecycle implementation process is v – if blocked, turned into a single set of two pieces of the life cycle of father performed the first component, when the value this value exists, create the vue instance, perform the child component life cycle, and in capturing the subcomponents success this enumeration value 6

Page effect:

At this point, the page does show what we want, but the subcomponent is rendered after it gets the value, that is, it gets the value, and the whole subcomponent flashes to our page after 1 second. I can’t say that you are wrong, but this is a really bad way to write.

Pheasant??

What is a pheasant? Understand all understand, do not understand please input the following entry by analogy:

Three, domestic chicken writing:

Use watch to listen for attribute values, and then process data after listening for values.

When we open the console, we find that we can listen for the enumeration value 6 in watch.

Page effect: “Beautiful, problem solved”.

One final note: this is a property of listening. When we are listening on an object, we also need to use deep listening and render it immediately with immediate. I’m not going to show it here, but you can try it out (actually BECAUSE I’m too lazy to write an example, hahaha)

Conclusion:

For some configuration data, for example, we need to pass in a property to control disabled, which can be assigned directly to the component, similar to the first method of assigning directly to the component, except that assigning directly to the component is much cleaner. But for asynchronous data, we must use Watch to listen for assignments, and if we are listening for objects, we also need to set the deep listen and render now properties.

Last but not least: Feel free to leave a comment in the comments section.