Shulou(Shulou.com)06/03 Report--

This article shares with you the content of the sample analysis of Vue.js1.x and the 2.x life cycle. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

In Vue.js, they are all stored in a text editor as HTML text before instantiating Vue. When instantiated, it will go through three main stages: creation, compilation, and destruction.

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

Lifecycle hooks for Vue.js 1.x

1. Init

Called synchronously when the instance starts initializing. Data observations, events, and Watcher have not been initialized at this time.

2. Created

Called synchronously after the instantiation is created. At this point, the instance has finished parsing options, and data binding, evaluation properties, methods, and Watcher/ event callbacks have been established, but DOM compilation has not started yet, and $el does not exist yet.

3. BeforeCompile

Called before compilation begins.

4. Compiled

Called at the end of compilation. At this point, so the directive is already in effect, so the change in the data will trigger the DOM update, but there is no guarantee that $el has been inserted into the document.

5. Ready

Called at the end of compilation and after $el first inserts the document, such as after the first attached hook.

6. Attached

Called when vm.$el inserts DOM.

7. Detached

Called when vm.$el is deleted from DOM. Must be deleted by instruction or instance method, direct operation vm.$el will not be triggered.

8. BeforeDestroy

Called when the instance is started to be destroyed, and the instance still has functionality.

9. Destroyed

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

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

Lifecycle hooks for Vue.js 2.x

1. Discarding ready and adding mounted

In version 1.x, the time to call the ready hook function is after the DOM is inserted for the first time, but 2.0 may not only be executed in the browser, but may also be rendered on the server side, so the ready is discarded and the mounted hook function is added, and the mounted hook function is called after the DOM tree is generated.

two。 Discarded beforeCompile

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

3. Discarded compiled

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

4. Discarded attached

In version 1.x, when attached is called when DOM is inserted, a real DOM,2.0 version is not necessarily created in version 2.0.

5. Discarded detached

In version 1.x, when the call to detached is to remove DOM, a real DOM,2.0 version is not necessarily created in version 2.0.

6. New beforeCreate

BeforeCreate is added in version 2.0, which is called after instance initialization and before data observation (data observer) and event/watcher events are configured.

7. New beforeMount

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

8. New beforeUpdate

The new beforeUpdate in version 2.0 is called before the DOM tree is generated and after the virtual DOM tree is generated, provided that the vm instance has been mounted. This hook function is not called during server rendering.

9. New updated

Updated is added in version 2.0, which is called after the DOM tree is generated, provided that the vm instance has been mounted. This 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 call condition is the keep-alive component. This hook function is not called during server rendering.

11. New deactivated

Deactivated is added in version 2.0, which is called when the Vue instance is terminated. The call condition is the keep-alive component. This hook function is not called during server rendering.

Thank you for reading! This is the end of this article on "sample Analysis of Vue.js1.x and 2.x Life cycle". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.