Resolve a .vue life cycle
> 1> What is the life cycle of vue
Vue before each instance is created to go through a series of initialization process that is vue life cycle. Specifically, Vue instance is created from the beginning, initialization data, compiled templates, hanging in the dom-> rendering Update -> Render, unloading a series of processes, we called it vue life cycle, all stages have corresponding event hook.
> 2> vue What are the life cycle, corresponding hook function can do **
First, FIG life cycle of Vue's official website is very clear to indicate what the hook function, then we hook function corresponding to each explain in detail.
> (1) new view ()
Instantiate an object vue
> （2）init events 和 init cycle
Initialization and life cycle events
> (3) beforeCreate hook function
After initialization example, pointing the this instance is created, not have access to data, computed, watch, methods, and data on methods. At this point, vue component object is created, but the property has not yet binding vue object that has no value. In other words, beforeCreate function is initialized after instance, was called before the observed data and event / watcher event configuration.
beforeCreate () { the console.log ( ' pre - Create hanging on ' , the this . $ EL) the console.log ( ' before creating -data ' , the this $ Data.) },
Print Results:
Practice scenario - used to initialize non-responsive variable
> (4) injections & reactivity init
hanging data (attribute assignment), including properties and the computed operation. BeforeCreated occurs between the hooks and the created two functions.
Print Results:
By printing a result that the calculated value of the attribute in beforeCreated hook function get, get them in the created hook function, the process of calculating the attribute is assigned and beforeCreated created between the two hook function.
> (5) created function
Instance is created, created hook function at this time, we are able to have access to data, computed, methods and data on methods, however, this has not hung dom. Do not have access to $ el, $ ref attribute content is not empty array.
Created () { the console.log ( ' when creating - El ' , the this . $ EL) the console.log ( ' when creating --data ' , the this .message) the console.log ( ' when creating -computed ' , the this . A) the console.log ( ' when creating --methods ' , the this .onClick ()) }
result:
Actual scene - commonly used in simple axios request, initialize the page.
> (6) whether there el attributes, and template attributes
Next, determine whether there el option on the object, if any, will continue to compile down, if no el option, the compiler stops, which means to stop the life cycle. Wait until manually bind call vm. $ Mount () to complete the global variable $ el binding.
If the object has after el option to determine whether there are template items, if there is a template template, it is compiled into a compiled template render function. If there is no template template, external HTML will be compiled as a template, so you can see, the template in the template takes precedence over the outer HTML priority. If there render function will replace the template
thus: priority relationship: render> template> out html
> (7) beforeMount hook function
It is called before beginning to mount, before beforeMount, will find the corresponding template, and compiled into render function.
At this time, the this. EL has the value $, but not mounted on the page data, i.e. {} {} at this time has not been replaced in the page.
beforeMount () { the console.log ( ' hanging before calling ' , the this . $ EL) },
Print Results:
> (8) mounted hook function
Examples of the DOM to mount, this time can be acquired DOM node DOM API, $ ref property to access.
Mounted () { the console.log ( ' hanging dom node ' , the this . $ EL) },
Print Results:
> (9) beforeupdate hook function
Called when responsive data update occurs before the virtual DOM patch.
Component update function previously performed.
Updated data, however, VUE (component) corresponding to the object inside the dom (the innerHTML) has not changed, so called component before update.
beforeUpdate () { the console.log ( ' component before update - data ' , the this .message) the console.log ( ' component before update --dom ' , the this $ el.innerHTML.) },
Print Results:
Combat scene: DOM for access existing before the update, such as manually removing event listeners have been added
> (10) updated hook function
DOM re-rendering and virtual call after patching, DOM component has been updated to perform the operation depends on the DOM
Updated () { the console.log ( ' the component update - data ' , the this .message) the console.log ( ' the component updates --dom ' , the this . el.innerHTML $) }
Print Results:
> - (11) beforeDestroy hook function
beforeDestroy () { the console.log ( ' before destruction instance ' , the this . $ EL) },
Called before destroy instance. This step, examples are still fully available, this can still get to the instance
Print Results:
> (12) destory hook function
After the destruction instance call after call, everything will de-binding indication Vue instance, all event listeners will be removed, all the child instance will be destroyed.
II. Implementation of the order life cycle of components between father and son
in order to prove what the life cycle of components between father and son, look at how his son when rendering the page lifecycle of components
Print Results:
According to print the results, we can find, first taking the life cycle of the parent component, after the finish beforeMount, sub-assemblies began to take on life cycle, directly to the mount after subcomponent node dom, dom node parent component in the mount. Thus, the page rendering is complete.
Then, when the data is updated, beforeUpdate, the order update component of father and son is kind of how it?
Dangdang when, print the results at a glance: beforeUpdate parent component will go first, and then go beforeUpdate sub-assemblies, updated, then the only other sub-components updated, the parent component will go updated. update completed
When destroyed, the destruction of the order of assembly of father and son is what is it?
Parent component will go first hook function before destruction, and subassemblies go before destruction, and the destruction of the hook function, after the completion of the destruction of sub-assemblies, parent component when walking destroyed hook function.
III. Mixins mixed in the life cycle
when the component life cycle and mixins mixed with the life cycle of a collision, what will spark clashes it look like?
https://segmentfault.com/img/bVbwob8?w=1666&h=953
print the results:
By playing a result, we find that, when life cycle and life cycle of the collision component mixins, mixins ** will go first life cycle, walk ** lifecycle components.
IV. Summarize
always wanted to write a blog about life cycles, to sum up, met his own problems in the project, we are sometimes found some problems really are mastering the life cycle caused by weak, although has been resolved, but also they want their hands to be able to confirm it in accordance with their own small demo, specific process lifecycle. Here summed up the process of initializing a series of vue instance is created before experienced. vue whole process from birth to death. And the order in the assembly and his son, the life cycle is how to walk, there are mixed when mixed with the life cycle of the life cycle of the assembly. There may also be insufficient summarize place, follow-up will continue to optimize.
Reference: In writing this article, also draws on several other people blog, write a good find. I recommend it.
https://juejin.im/entry/5aee8fbb518825671952308c
https://blog.csdn.net/jiang7701037/article/details/83118665
https://segmentfault.com/a/1190000011381906