Let's talk about the Vue life cycle in detail

Preface

Nowadays, more and more people are learning Vue. Learning the Vue framework or React framework has also become a necessary skill for front-end developers. Today we will talk about the life cycle functions in Vue. The reference value of the life cycle functions in Vue is very high. Let us get to know it together~

1. Life cycle in Vue2

Instance lifecycle

Before introducing the life cycle, we need to know that when rendering a piece of page content in Vue, there will be the following processes:

1. Parsing the grammar generates an AST.
2. According to the AST result, complete the data initialization.
3. Generate a virtual DOM based on the AST result and data binding.
4. The virtual DOM generates the real DOM and inserts it into the page, at which time the page will be rendered.

When the bound data is updated, the following processes will occur:

1. The framework receives data change events and generates a new virtual DOM tree based on the data. Compare the old and new virtual DOM trees and get the difference.
2. Apply the differences to the real DOM tree, that is, update the page content according to the differences.

When we clear the page content, there is also:

1. Log out of the instance, clear the page content, remove bound events, listeners, etc.

Vue provides a total of 8 lifecycle functions for instances:

1. beforeCreate(): Before initializing the instance, data, methods, etc. cannot be obtained - after 1, before 2
2. created(): instantiation initialization is completed, at this time you can get the data in data and methods events - after 2 and before 3
3. beforeMount(): The virtual DOM is created, but it is not mounted on the page. vm.$el can get the unmounted template - after 3 and before 4
4. mounted(): Data binding is complete, the real DOM has been mounted to the page, vm.$el can get the real DOM——After 4
5. beforeUpdate(): Data updated, DOM Diff gets the difference, not updated to the page - after 5, before 6
6. updated(): The data is updated and the page is also updated - after 6
7. beforeDestroy(): before instance destruction - before 7
8. destroyed(): instance destruction completed - after 7

Regarding the life cycle of an instance, you can also refer to the official illustration

Other lifecycle hooks

Other life cycle functions include activated(), deactivated(), errorCaptured()

The unique life cycles of keep-alive are activated and deactivated.

Components wrapped with keep-alive will not be destroyed when switched, but cached in memory and execute the deactived hook function. After hitting the cache rendering, the activated hook function will be executed.

The errorCaptured() hook is called when an error is captured in a child component.

2. Life cycle in Vue3

The life cycle in Vue3 is different when using the Options API and the Composition API.

Options API Lifecycle

• beforeDestroy is changed to beforeUnmount
• destroyed to unmounted

When asked why he changed it to this, You Dada replied that this was largely for a better naming convention. The corresponding Chinese word is exactly the uninstall component, which is quite consistent with the previous mount component.

• Other life cycles follow Vue2

Composition API Lifecycle

To use the hook function in the Composition API, we just need to add "on" in front of the hook function and inside the setup function, it will become like this 👇

We just need to introduce these hook functions to use them

The hook functions of Vue3 are as follows:

1. onBeforemount()
2. onMounted()
3. onBeforeUpdate()
4. onUpdated()
5. onBeforeUnmount()
6. onUnmounted()
7. onActivated()
8. onDeactivated()
9. onErrorCaptured()

If you pay attention, you will find that two life cycle methods have disappeared. BeforeCreate() and created() will not appear in the Composition API. We only have the setup() method. The setup() method appears between beforeCreate() and created().

Two new Vue3 lifecycle functions

• onRenderTracked(): This function will be called the first time a reactive dependency is accessed in a render function. This hook is useful when we want to see which dependencies are being tracked. It is useful for debugging.
• onRenderTriggered(): This will be called when a new render is triggered, allowing to inspect which dependency triggered the component to re-render.

at last

⚽This article mainly introduces the life cycle functions in Vue. I believe you will gain something~

This is the end of this article about the Vue life cycle. For more relevant Vue life cycle content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!