Learn the vue.js of the Web from scratch (iii) The life cycle of the Vue instance

Hello everyone, here is "learn the Web series from scratch" and synchronize updates at the following address ...

• Github:github.com/daotin/web
• Public number: The top of the Web front
• Blog Park: http://www.cnblogs.com/lvonve/
• csdn:blog.csdn.net/lvonve/

Here I will start with the Web front End 0 Foundation, step-up learning web-related knowledge points, during the period will also share some fun projects. Now let's go to the Web Front end learning Adventure tour!

One, the life cycle of the Vue instance

The life cycle of the Vue instance refers to the creation, operation, and destruction of the Vue instances, which are associated with a variety of events, known as lifecycles.

Life cycle events, also known as life cycle functions, are also called life cycle hooks.

Three stages of life cycle function

life cycle functions during creation : beforeCreate and created , beforeMount and mounted .

life cycle functions during runtime : beforeUpdate andupdated

life cycle functions during destruction : beforeDestroy anddestroyed

Three, the life cycle function detailed

During creation:

• beforeCreate: Indicates that the Beforecreate function is executed before the instance is completely created, and data and methods are not initialized, and if data and methods are called, an error is given.
  
• created: the instance has created OK in memory, and data and methods have created OK, and the template has not been compiled yet.
• beforeMount: The compilation of the template has been completed, but it has not been mounted from memory to the page.

Note: When Beforemount executes, the elements in the page are not actually replaced, just some of the previously written templates (such as an interpolation expression) are just the form of a string.

• mounted: At this point, the compiled template has been mounted and displayed in the container specified by the page.

Operating period:

• beforeUpdate: A function that executes after data is updated, but not yet rendered to the page. The data data has been updated, but the page is still old.
• updated: When the updated event was executed, the page and data were kept in sync, all up to date.

During destruction:

• beforeDestroy: Called before the instance is destroyed. In this step, the data,methods on the instance is still fully available.
• destroyed: Called when the Vue instance is destroyed. Once invoked, everything indicated by the Vue instance will be unbound, all event listeners will be removed, and all child instances will be destroyed.

The entire life cycle is illustrated by: