Talk about the life cycle of Vue2

First of all, what is the life cycle

What is the life cycle?

Each Vue instance goes through a series of initialization procedures when it is created — for example, you need to set up data listeners, compile templates, mount the instance to the DOM, update the DOM when the data changes, and so on. Functions called lifecycle hooks are also run along the way, giving users the opportunity to add their own code at different stages.

Vue of life cycle, total is divided into four categories, and each stage is the instance and mount the stage, update, destroy, each cycle is divided into before and after the current cycle, and in fact simply for life cycle life with us also pretty similar, we divided into life before birth (instance), youth (mount), middle-aged and old period (update), death (destroyed), See the life cycle diagram below

Life cycle diagram:

Lifecycle hook functions

1. Example Period:

Before instance creation (beforeCreate)

  • The component instance has just been created, and component properties (such as data) have not yet been created
  • Called after instance initialization, before data Observer and Event/Watcher event configuration

Created when an instance is Created

  • The component instance is created, the properties are bound, but the mount phase has not started, the DOM has not been generated, and the $EL property is not currently visible.

2. Mount period:

Before the mount (beforeMount) :

  • Called before the mount begins, the associated render function is called for the first time, and the hook is not called during server-side rendering.

After the mount (Mounted) :

  • El is replaced by the newly created vm.$el, which is called after being mounted to the instance
  • When Mounted is called,vm.$el is also in the document if root is attached to an element in the document
  • This hook is not called during server-side rendering

3. Update Period:

Before the update (beforeUpdate) :

  • Called when data is updated and occurs before the virtual DOM is patched. This is a good place to access the existing DOM before updating, such as manually removing event listeners that have been added.
  • Called when data is updated, before the virtual DOM is re-rendered and patched
  • Further state changes can be made in this hook without triggering additional re-rendering.
  • This hook is not called during server-side rendering

The Updated (Updated) :

  • This hook is called after the virtual DOM is re-rendered and patched due to data changes.
  • When this hook is called, the component DOM has been updated, so you can now perform DOM-dependent operations.
  • In most cases, however, you should avoid changing the state during this period, as this can lead to an infinite update loop
  • This hook is not called during server-side rendering

4. Destruction Period:

Before destruction (beforeDestroy) :

  • Called before instance destruction. At this step, the instance is still fully available.
  • This hook is not called during server-side rendering.

After the destruction (Destroyed) :

  • Called after the Vue instance is destroyed. When called, everything indicated by the Vue instance is unbound, all event listeners are removed, and all subinstances are destroyed.
  • This hook is not called during server-side rendering.