Some understandings of Vue2.0 and vue1.0--life cycle and hook functions

Preface

After using Vue for more than a week, the feeling is still in its infancy, although it knows how to interact with the backend, but it is not clear what the mounted is. Magnified, the life cycle of Vue is not well understood. Only know simple use, and do not know why, this on the back of the pit is quite unfavorable.

Because we sometimes do things in several hook functions, when we do, in which function we don't know.

So I started to search first, found vue2.0 life cycle no article. Most of the 1.0 versions are introduced. Finally find a good (will put in the end) Vue life cycle Introduction

We can clearly see from the above figure which life cycle functions are now included in the vue2.0. Life cycle Exploration

For the execution order and when to execute, look at the above two graphs basically have a understanding. Below we will combine the code to see the execution of the hook function.

PS: The following code can be copied directly out of the execution

<! DOCTYPE html>  
Create and mounted related 
We open it in the Chrome browser, F12 see the console to find

Beforecreated:el and data are not initialized
Created: The initialization of data is completed, El has no
Beforemount: Completed the EL and data initialization
Mounted: Complete mount

Also in the red, we can find the El or {{message}}, here is the application of virtual DOM technology, the first to occupy the pit. The value is then rendered in the back mounted when it is mounted.

Update Related

Here we execute the following commands in the Chrome console

App.message= ' Yes!! I do ';
 
The following can see that the value in data has been modified and will trigger the update operation.

Destroy related

There is no clear information on the destruction. We execute the command in the console to destroy the Vue instance. Once the destruction is complete, we re-change the value of the message, and Vue no longer responds to this action. But the previously generated DOM element still exists, so to understand, the destroy operation is performed, and the subsequent is no longer subject to Vue control.

App. $destroy ();
 
Life Cycle Summary

So many hook functions, how do we use it, I think we may have such a question, I also have, hahaha.

Beforecreate: Give me a chestnut: You can add a loading event here.
Created: In this end loading, also do some initialization, implement function self-executing
Mounted: In this initiating back-end request, take back the data, with the routing hooks do something
Beforedestory: Are you sure you want to delete xx? Destoryed: The current component has been deleted, emptying the relevant content

Of course, there is more, continue to explore ... written in the last

This article is an understanding of the life cycle of vue, and if there are errors, please correct them, so that the boy can make progress.
If it helps you, it's my greatest pleasure.

By the way, brother, if you have any help, you may wish to order a collection or recommend to go again.

Reference Documents

https://segmentfault.com/a/1190000008010666

HTTPS://SEGMENTFAULT.COM/Q/10 ...
http://www.cnblogs.com/gagag/...

Thanks for the articles and questions from the above brothers.

In addition, wrote a new article Vuex, you are welcome to give some advice. Portal: Vue2.0 exploring Road--vuex Getting started tutorial and thinking
Wrote a new article Vue-router, also welcome you to give some advice. Portal: Vue2.0 Exploring Road--vue-router Introductory Tutorial and summary

Last updated article: