Examples of the life cycle of vue
- What is the life cycle: from creation Vue instance, to run, to destroy the period, always accompanied by a variety of events, which, collectively referred to as life cycle!
- Lifecycle hook : is the alias of life cycle events only;
- Lifecycle hook function = = life cycle life cycle events
The main function of the life cycle Category:
- During the life cycle of creation functions:
beforeCreate
: Just instance is created in memory, this time, there is no good data to initialize properties and methodscreated
: Example has been created in memory OK, this time data and methods have been created OK, this time has not yet begun compiling a template, if the method is to be invoked methods or manipulate the data in the data, first created in only operate inbeforeMount
: At this point has been compiled template, but have not mounted to the page, at the time of execution beforeMount, page elements, but also not really replaced over, just before writing some template stringmounted
: At this point, has compiled template, mounted to the display page designated container, mounted the last period of the life cycle of a function instance is created, when executing the mounted on said instance has been completely created. If you want to manipulate the DOM element by some plug-ins, at the earliest operation mounted in.
- During the life cycle of the run function:
beforeUpdate
: This function is executed before a status update, this time in the state value data is up to date, but the data displayed on the screen or old, because at this time has not yet begun to re-render a DOM nodeupdated
: After the example of updated call this function, data is displayed on the data values in the state and interfaces, have completed the update, the interface has been re-rendered good!
- During the life cycle of destruction function:
beforeDestroy
: Call before the instance is destroyed. In this step, the instance is still fully available.destroyed
: Vue instance calls after the destruction. After the call, everything will de-binding indication Vue instance, all event listeners will be removed, all the child instance will be destroyed.