Response principle

VueLife cycle of

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

The process from creation to destruction of a Vue instance of a hook function is accompanied by some self-calls to the function. Call these functions hook functions.

Why are they called hooks? The reason is that the code has been programmed to respond to an instance event, that is, a hook that hooks an instance state or event.

The lifecycle of the creation phase

1.beforeCreate

After instance initialization, data Observer and Event/Watcher events are called before configuration. At this point, the data in data and methods has not been initialized.

2.created

Called immediately after the instance is created. In this step, the instance completes the configuration of data Observer, property and method operations, and Watch/Event event callbacks. At this point, data and methods can be initialized. However, the mount phase has not yet started and the $EL attribute is not currently available. The page has not been rendered yet.

Note: If you want to call methods in methods or manipulate data in data, you can only do this in Created at first.

3.beforeMount

Called before the mount begins. At this point, you can’t see the actual data on the page because the template is compiled in memory but not rendered to the page.

Note: When beforeMount is executed, the elements in the page are not actually replaced, and some template strings that were written before are displayed.

4.mounted

Called after the instance is mounted, when el is replaced by the newly created vm.$el. At this point the data has actually been rendered to the page.

Mounted is the last life-cycle function used during instance creation. When mounted is executed, the instance is fully created.

Note:

Mounted does not ensure that all child components are mounted together. If you want to wait until the entire view is rendered, use vm.$nextTick inside Mounted:

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered})}Copy the code

Second, the life cycle of the operation phase

1.beforeUpdate

Called when data is updated and occurs before the virtual DOM is patched. At this point, the data on the page is still old, but the data data is up to date, and the page has not been synchronized with the latest data.

This is a good place to access the existing DOM before updating, such as manually removing event listeners that have been added.

2.updated

This hook is called after the virtual DOM is re-rendered and patched due to data changes. The data on the page has been replaced with the latest one.

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 status in the meantime. If you want to change state accordingly, it is usually best to use computed properties or Watcher instead.

Life cycle of destruction stage

1.beforeDestroy

Called before instance destruction. At this step, the instance is still fully available.

2.destroyed

Called after instance destruction. When this hook is called, all instructions for the Vue instance are unbound, all event listeners are removed, and all subinstances are destroyed.