Vue Life cycle

• What is the life cycle: the creation, operation, and destruction of a Vue instance is always accompanied by a variety of events, which are called lifecycles.
• Life cycle Hook: is the alias of the life cycle event.
• Main life cycle function classifications:
  • Life cycle functions during creation:
    • beforecreate: the instance has just been created in memory, and the data and methods properties are not initialized at this time.
    • created: the instance has been created in memory, and data and methods have been created, and the template has not been compiled yet, and if you want to invoke the method in methods or manipulate the data in it, you can only operate in created at the earliest.
    • Beforemount(before mounting): The compilation of the template has been completed at this time, but it has not been mounted on the page.
    • mounted: At this point, the compiled template has been mounted to the page specified in the container display, if you want to through some plug-in operation of the DOM node on the page, the first to be done in mounted, as long as the execution of mounted, It means that the entire Vue instance has been initialized, and the component has moved out of the creation phase and into the running phase.
  • Life cycle functions during Runtime:
    • The two events, BeforeUpdate and updated, are selectively triggered 0 times to several times, depending on the data changes.
    • BeforeUpdate: This function was executed before the status update, at which time the status value in data is up to date, but the data displayed on the interface is still old because the DOM node has not been re-rendered at this time.
    • Updated: This function is called after the instance has been updated, and the status values in data and the data displayed on the interface have been updated and the interface has been re-rendered.
  • Life cycle functions during destruction
    • Beforedestroy: the instance is destroyed before being called, in this step, the instance is still fully available.
    • After the Destroy:vue instance is destroyed, after the call, everything that the Vue instance indicates will be unbound, all event listeners will be overrun, and all fruiting meetings destroyed.

Demo diagram

Vue Life cycle