First, the official vue life cycle flow chart
Two, vue lifecycle Introduction
When beforeCreate executed: data and el no initialization value is undefined
When performing created: Examples of data objects viewed data Vue has been configured, it has been possible to obtain the value app.message, but the root of a DOM instance of element el Vue yet initialized; ajax to retrieve data from multiple backend
When beforeMount executed: data are initialized and el, {{message}} but such phenomena can not be seen at this time and rendering into data el, el is "virtual" node element
- When mounted execution: At this point el has been rendered, and mounted on an instance; rendering the document has been completed, the binding event!
Summary: beforecreated: el and data did not initialize; created: the completion of the initialization data data, el no; beforeMount: el completed and data initialization; mounted: complete mounted. (Note: In the application phase of beforeMount Virtual DOM (virtual Dom) technology, occupy the first pit, mounted to the rear mount time value and then render into it.)
Three, vue lifecycle basic features
1. What is the life cycle Vue?
A: Vue instance process from creation to destruction, is life cycle. That is, from the beginning of creation, initialization data, compiled templates, mount DOM-> rendering Update -> Render, unloading a series of rendering process.
2, Vue role in the life cycle?
A: It's the life cycle of multiple events, so we control the entire process Vue instances is easier to form good logic.
3, the first of several hooks which will trigger the page loads?
答：会触发beforeCreate、created、beforeMount、mounted
4, hook function
(1) beforeCreate: Before this declaration of variable data
(2) created: Vue instance is created, a variable assignment; usually used to get data from back-end ajax
Before Before mount DOM, data rendering: (3) beforeMount
Followed by $ el Vue inside to replace elements on the page,: (4) mounted
update-> data modification data in (5), and then update the page
(6) beforeDestroy, destroed: destroy instance, vue instance still exists, but the unbundling of the event there watcher object data binding with a view to listen, that is data driven
Note: When vue instances where there are both el template; the template template will overwrite vue scope (div Territory)
mount挂载的含义：Vue实例中的el、data 去替换vue作用域(div领地)