Life cycle
Each instance of a component and will experience a complete life cycle, divided into three phases
1. Initialization Stage
2 operation (mount data)
3. destruction
during the life cycle
1 and a component instance, by new Vue () to create , start life cycle.
2. After instantiation, beforeCreate hooking function will be executed immediately, without loading data at this time, then the function which can not acquire data while there is no real DOM nodes hanging out to NULL.
3. Mount Data ( Note: not mounted dom node ) and after binding events, performs created hook function , when data has been completed mount, where you can get the data and change data. But in this case it will not trigger another hook function. It can be used to make ajax requests and event bindings .
4. After completing the created hook function, started looking for the components and examples of each template, let it be compiled into virtual DOM, put rander function to initialize rendering , beforeMount hook function in virtual DOM has been created out of, but the data has not been rendered, here you will not trigger another hook function can be used to make requests and event bindings.
5. In rander function rendering real the DOM , started mounted functions , where data is already mounted good, dom node also rendered, you can do some examples of related things.
6. InWhen data components and instances of changes , will be executed immediately beforeUpdate function , and then re-create a virtual DOM DOM with the old virtual method with diff contrast, and then re-render.
7. When the update is complete, the implementation of updated function , this time data, DOM updates are complete, you can. New the DOM
8. When you call $ destroy method through some means for the immediate implementation of beforeDestroy hook function , this time also examples not destroyed.
9. After the example of the destruction of the hook function will be executed immediately destroyed , everything will de-binding indication at this time Vue example, all event listeners will be removed, all the child instance will be destroyed. During the rendering on the server side of the hook is not called, leaving only a shell DOM, where you can do perfect work.
