Vue about Lifecycle

Preface:

1. Life Cycle of a single vue component;

2. lifecycle of Vue parent and child components;

3. Component cycle of Axios asynchronous requests and vue;

 

1. lifecycle of each vue component

For the lifecycle of each component, the official document also provides relevant articles on the Internet. I will not repeat them here, post a URL and a summary.

Vue lifecycle-from simple to simple

Summary:

　　　　1. beforecreate $ El and data are all undefined;

2. created can get the value in data, but this. $ El is undefined;

3. beforemounte can print this. $ El at this time, but {data} is not replaced yet. This. $ El is a virtual node;

4. mounted data, $ El can be printed, {data} has been replaced with the formal Dom, And the Vue instance is mounted on the real DOM tree;

5. beforeupdate/updated;

6. beforedestroy/destroyed;

　　Simple:

 

 

Ii. lifecycle of parent and child components

In projects, you may be more concerned about the lifecycle of a single component.

A recent project has an optimization: The portal is a platform (parent system). In this parent system, click the button to enter the corresponding module of the subsystem. Of course, the window is opened by _ blank, the communication process between the parent and child systems is that the Vue Route Navigation guard sets the Token Based on the token in the cookie. If there is a token in the cookie, it will jump normally without a token, and it will pass the H5 postmessage ()/window. addeventlistener ('message', function (event) {}, false) to get toke from the parent system, in the callback function (event, put the obtained token in the cookie first, so that the next Axios request can take a value from the cookie and set the request header, other user information is obtained and stored in localstorage according to the token.

However, the problem occurs on _ blank (this is not considered during Technology Selection, and vue is suitable for SPA projects ), if I first enter a module of the subsystem (a new tab is opened) with an account information, and then return to the parent System window without closing this page, switch the account to log on to the parent system, if you click to enter the module of the same subsystem, you will find that the data pulled at this entry is pulled based on the previous userid stored in localstorage. However, f5 refresh to pull the correct information, which is unreasonable.

Later, I read the source code and found that some of the most basic sub-components in the subsystem are obtained from localstorage, and each module has the postmessage method, this method is called only in the mounted phase of the parent component. This means that the above account is changed and the sub-component enters the module. The sub-component first pulls data according to the pre-account information in localstorage/cookie, after the initialization is complete, the parent component executes the postmessage method in mounted after the initialization of all child components is complete, obtains and sets the token of the account in the cookie, and then f5, the correct data is obtained only when the token of the postaccount is in the request header.

The lifecycle of the Parent and Child components is as follows:

1. Loading rendering process:

Parent beforecreate-> parent created-> parent beforemount-> child beforecreate-> child created-> child beforemount-> child mounted-> parent mounted

2. Child component update process

Parent beforeupdate-> child updated-> parent updated

3. Parent component update process

Parent beforeupdate-> parent updated

4. Destruction Process

Parent beforedestroy-> child destroyed-> parent destroyed

 

I understand the rendering time of the Parent and Child components. Can I call the postmessage method when the parent component beforecreate/created/beforemount is used?

The answer is no. Why? Because it is asynchronous. I tried to call the postmessage method in the above three stages of the parent component. The execution of the callback function will definitely lag behind the rendering and mounting of the Child component, that is, the sub-component pulls data by using the pre-account information in the cookie/loaclstorage, which will be executed before the post-account token is stored in the cookie. This is one of the two, because vue recommends the Axios request module, which is an asynchronous request module, this step lags behind the rendering and mounting of child components even if the user information is updated in the three phases of the parent component.

 

How can this problem be solved?

My solution: beforerouteenter (to, from, next)

In this hook, call postmessage to obtain the latest token. In its callback function, use jquery with the new token (there is dependency in the project) send an Ajax request to pull users' key information. This request is set to synchronous. After the data is obtained, the related information is updated to Cookie/localstorage, make sure that subsequent requests are based on the latest user information. After all the above operations are completed, next () goes to the desired route.

 

Conclusion:

No synchronization request in Axios, and $. Ajax is not recommended. Vue still needs to be explored if there is no better solution to this problem.

 

Vue about Lifecycle