Exploring the path of vue2.0-understanding of lifecycle and Hook Functions

Preface

After using vue for more than a week, I feel that I am still in the initial stage. Although I know how to interact with the backendmountedThis mount is not very clear. To zoom invueIs not familiar with the lifecycle. I only know how to use it, but I don't know why. This is quite bad for the backend.

Because sometimes we will do something in several hook functions, and we don't know when to do it or in which function.

So I started searching and foundvue2.0There is no article about the lifecycle. Mostly1.0. Finally, I found a good article (which will be placed at the end)

Vue lifecycle Overview

 

 

We can clearly see thatvue2.0Which lifecycle functions are included.

Life Cycle Exploration

For the execution sequence and when to execute it, see the above two figures. Next we will look at the execution of the hook function with the code.

PS: the following code can be copied and executed directly.

<! Doctype HTML> 

Create and mounted Problems

InchromeOpen in the browser,F12ViewconsoleYou can find

beforecreated: El and data are not initialized.
created: Data Data Initialization is completed. El does not
beforeMount: El and data initialization are completed.
mounted: Complete mounting

In addition, we can find El or {message} in the red, which is the application'sVirtual DOM(Virtual DOM) technology first occupies the trap. To the endmountedThe value is then rendered during mounting.

 

Update related

Run the following command in chrome console:

app.message= ‘yes !! I do‘;

The update operation is triggered after the value in data is modified.

 

Destroy

It is not clear about the destruction. Run the following command on the console to destroy the Vue instance. After the message is destroyed, the message value is changed again. vue no longer responds to this action. However, the originally generated Dom element still exists. In this way, after the destroy operation is executed, it will no longer be controlled by vue.

app.$destroy();

 

Life Cycle Summary

How can we use so many hook functions? I think you may have such questions. I also have these questions, hahaha.

beforecreate: For example, you can add a loading event here.
created: End loading and perform initialization to implement self-execution of functions.
mounted: Initiate a backend request here, fetch data, and use the routing hook to do something
beforeDestroy: Are you sure you want to delete XX? Destroyed: The current component has been deleted and related content has been cleared.

Of course, there are more to continue exploring ......

Exploring the path of vue2.0-understanding of lifecycle and Hook Functions