beforeCreate

After instance initialization, this points to the created instance, and the Data Observer and Event/Watcher configurations have not been completed, so methods and data on methods, Data, computed, and Watch cannot be accessed.

created

Complete the following configurations: Data Observer, property and method operations, and Watch/Event event callbacks. The $EL attribute is not yet mounted to the DOM, and the $ref content is an empty array. At this point, you can access methods defined in methods, modify data data, and trigger responsive change, computed value recalculation, watch to change, and so on.

To do DOM manipulation, you can use asynchronous functions such as $nextTick or setTimeout.

beforeMount

BeforeMount the corresponding template is found and compiled into the render function (this step will be done earlier at build time if using.vue files and runtime versions)

If the render function is specified, the render function is used directly, that is, the template argument and the el external HTML are ignored

mounted

El is replaced by the newly created $EL, and the instance is mounted to the DOM, where the DOM node is available through the DOM API and the $ref attribute is accessible. Mounted is usually entered first. Vue

Note that Mounted does not promise that all child components will also be mounted together. If you want to wait until the entire view rendering, can use [vm. $nextTick] (https://cn.vuejs.org/v2/api/#vm-nextTick)

Change the values on data at this stage, and the associated computed attributes can be updated immediately; Mounted does not update the DOM when it is retrieved.

beforeUpdate

The update object here is the template, that is, the virtual DOM needs to be rerendered and patched. BeforeUpdate occurs before the previous two processes, when a new virtual DOM has been generated.

The update process is not triggered if the changed data is not used in the template (either directly or indirectly: for example, a calculated property that depends on the data is used in the template). If the change operation is not a simple assignment of the underlying type and the data is used in the template, it can cause an endless loop (constantly re-entering beforeUpdate).

new Vue({ el: '#app', template: '<p id="testa">{{a}}</p>', router, data () { return { a : 0, c: 0 } }, beforeUpdate() { console.log(document.getElementById('testa').innerHTML) // this.c = 1; // this.a = 3; // this.c is not used in the template and the change does not cause a re-rendering process. // this. A ++; // this. Updated () {console.log(document.getelementById ('testa').innerhtml)}})Copy the code

In beforeUpdate you can listen for data changes, but the View is not re-rendered, the View’s data is not changed, when updated, the View is re-rendered and the data is updated. Note: Because of the problems mentioned in the code above, you should avoid manipulating data in this hook.

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 to perform DOM-dependent operations.

Note that updated does not promise that all child components will also be redrawn together. If you want to wait until the entire view to redraw, can use [vm. $nextTick] (https://cn.vuejs.org/v2/api/#vm-nextTick)

Again, you should avoid manipulating data in this hook function.

beforeDestory

Called before instance destruction. At this point, the instance is still fully available, and this can still get the instance. This step is usually used to destroy timers, unbind global events, and destroy plug-in objects.

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.

Note: Active calls to $destroy() after Vue2.0 do not remove dom nodes, and the authors do not recommend direct destroy. For details, see github.com/vuejs/vue/i…

other

<keep-alive>Component related

The lifecycle hook function is not called repeatedly when using a

component (beforeUpdate, updated), and the Activated hook can be used if our child component needs to do something every time it loads.

Parent component lifecycle order in VUE

  • Load rendering process: parent component (beforeCreate->created->beforeMount) -> Child component (beforeCreate->created->beforeMount->mounted) -> Parent component (mounted)
  • Child component update process: parentbeforeUpdate– > children (beforeUpdate->updated) – > the fatherupdated
  • Parent component update process: ParentbeforeUpdate– > the fatherupdated
  • Destruction process: ParentbeforeDestroy– > children (beforeDestroy-> destroyed) – > the fatherdestroyed

As can be seen from the loading sequence above, the parent component hook is first called to complete the corresponding parent component preparation operation (only one DOM operation is missing), then all the operations of the child component are completed, and finally the DOM operation of the parent component is performed.