Vue.js the life cycle of 1.x and 2.x instances

In Vue.js, before the Vue is instantiated, they are in a text editor in the form of HTML text. When instantiated, it will go through the creation, compilation, and destruction of three major phases.

The following is a life cycle diagram of the Vue.js 1.x instance:

Vue.js 1.x life-Cycle hooks

1. Init

Called synchronously when the instance begins to initialize. Data observations, events, and watcher are not initialized at this time.

2. Created

Called synchronously after the instantiation is created. At this point the instance has ended parsing options, established: Data binding, computed properties, methods, watcher/event callbacks, but no DOM compilation has started, $el does not exist yet.

3. Beforecompile

Called before the compilation begins.

4. Compiled

Called after compilation is complete. At this point the instruction is in effect, so changes to the data will trigger the DOM update, but the $el is not guaranteed to be inserted into the document.

5. Ready

Called After the end of compilation and $el the first time the document is inserted, such as after the first attached hook.

6. Attached

VM. Called when the $el is inserted into the DOM.

7. Detached

Called when the VM. $el removed from the DOM. The VM must be manipulated directly by the instruction or instance method. $el does not trigger.

8. Beforedestroy

Called when the instance is started to be destroyed, at which point the instance still has functionality.

9. Destroyed

Called after the instance is destroyed, all bindings and instance instructions have been unbound and all child instances have been destroyed.

The following is a life cycle diagram of the Vue.js 2.x instance:

Vue.js 2.x life-Cycle hooks

1. Obsolete ready, new mounted

In the 1.x release, the Ready hook function is called the first time after the DOM is inserted, but 2.0 does not necessarily only execute in the browser, it may be rendered on the server side, so discard ready and add mounted hook function, mounted hook function call time after the DOM tree generation.

2. Abandoned beforecompile

In the 1.x version, the call Beforecompile hook function was discarded in version 2.0 and replaced with created before the template was compiled.

3. Abandoned compiled

In the 1.x release, the call to compiled was discarded in version 2.0 and replaced with mounted before the template was compiled, and before the DOM was created.

4. Abandoned attached

In the 1.x release, attached is called when inserting the DOM, and the 2.0 version does not necessarily create the actual dom,2.0 version obsolete.

5. Abandoned detached

In the 1.x version, when the call to detached is removed from the DOM, the 2.0 version does not necessarily create the actual dom,2.0 version obsolete.

6. New Beforecreate

New in version 2.0, Beforecreate is called after instance initialization, data observer, and Event/watcher event configuration.

7. New Beforemount

The new Beforemount in version 2.0 is called before Watcher, after the template is compiled into the Render method, and the related render is called for the first time. The hook function is not called during server rendering.

8. New BeforeUpdate

The new BeforeUpdate in version 2.0 is called after the DOM tree is generated and the virtual DOM tree is generated, and the condition is that the VM instance has been mounted. The hook function is not called during server rendering.

9. New updated

The new updated in version 2.0, called after the DOM tree was generated, is called after the VM instance has been mounted. The hook function is not called during server rendering.

10. New activated

Activated is added in version 2.0, and after the DOM tree is generated, the calling condition is the keep-alive component. The hook function is not called during server rendering.

11. New deactivated

The new deactivated in version 2.0 is called when the Vue instance is destroyed, and the calling condition is the keep-alive component. The hook function is not called during server rendering.

Vue.js the life cycle of 1.x and 2.x instances