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

Editor to share with you what the life cycle state of vue, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Eight life cycle states of vue: 1, beforeCreate;2, created;3, beforeMount;4, mounted;5, beforeUpdate;6, updated;7, beforeDestroy;8, destroyed.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Eight states of the vue.js lifecycle:

1. BeforeCreate (before creation): called before initialization of vue instance

After initializing the instance at this stage, the data observation and event configuration are not ready, while the data and el in the instance are still in underfined status and are not available, and the dom element is not loaded. In this case, we add the ref attribute to the html snippet code, and the operation used to obtain the DOM element will report an error. For more details, please use code test.

2. Created (after creation): called after initialization of vue instance

The hook immediately after beforeCreate is created with created. At this point, we can read the value of data, but DOM has not been generated yet, so the attribute el still does not exist and the dom element is not loaded.

3. BeforeMount (before loading): called before mounting to the DOM tree

At this time, the $el is successfully associated with the DOM node we specified, but the DOM element has not been loaded at this time. If the name in the bound data in the DOM element uses {{name}}, it cannot successfully render the data in our data.

4. Mounted (after loading): called after mounting to the DOM tree

After the mount phase, the data will be rendered successfully at this stage. The DOM element is also loaded, and we add the ref attribute to the html snippet code to get the DOM element.

5. BeforeUpdate (before update): called before data update

When you modify the data of a Vue instance, Vue will automatically update the rendered view for us. In this process, Vue provides us with the hook of beforeUpdate. When it is detected that we are about to modify the data, the hook beforeUpdate will be triggered before updating the rendered view. In the html snippet code, we add the ref attribute to get the DOM element. The data on the Dom element has not changed.

6. Updated (after update): called after data update

This stage is to update the rendered view, and then read the contents of the view, which is already the latest content. The data on the loaded DOM element is updated.

7. BeforeDestroy (before termination): called before the vue instance is terminated

Calling the instance's destroy () method destroys the current component, triggering the beforeDestroy hook before destroying it.

8. Destroyed (after termination): called after the termination of the vue instance

After the successful termination, the destroyed hook will be triggered. At this time, the association between the instance and other instances has been cleared, and it has also been unbound from the view. Then modify the value of name to try not to update it, indicating that the instance has been terminated successfully.

The following is the life cycle diagram in the official document

These are all the contents of the article "what are the Lifecycle States in vue?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.