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

This article will explain in detail what the life cycle of vue components refers to. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

In vue components, the life cycle refers to the whole process from component creation to component destruction; at different stages of the process, vue invokes specified component methods. The basic lifecycle function has the following phases: creation phase, mount phase, update phase, uninstall phase, and so on.

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

1. Component life cycle

The component life cycle refers to the process from creation to destruction of a component, in which vue invokes specified component methods at different stages of the process.

The basic lifecycle function has the following phases:

Creation Pha

Mounting phase

Update phase

Unloading Pha

Other

Each stage corresponds to two functions before and after.

2. Creation phase

2-1, beforeCreate ()

After the instance is initialized, data observation (data observer) and event/watcher events are called before configuration. In the initialization stage, there are not many applications.

2-2, created ()

Is called immediately after the instance is created. In this step, the instance has completed the following configuration: data observation (data observer), property and method operation, and watch/event event callback. However, the mount phase has not yet begun, and $el property is not currently available.

3. Mounting stage

3-1, beforeMount ()

Called before the mount starts: the related render function is called for the first time.

3-2, mounted ()

This phase completes template parsing and mounting. At the same time, the root component element of the component is assigned to the $el attribute, and the internal elements of the component can be processed through the DOM operation at this stage.

4. Update phase

4-1, beforeUpdate ()

Called when the data is updated, but the view has not yet been re-rendered, and at this point, you can get the state before the view update.

4-2, updated ()

The view is re-rendered due to changes in the data, and the latest state of the view can be obtained through the DOM operation.

5. Uninstall phase

5-1, beforeDestroy ()

Called before the instance is destroyed to remove some unnecessary redundant data, such as timers.

5-2, destroyed ()

Called after the Vue instance is terminated.

6. Other

6-1, .$ nextTick ()

Defer the callback until after the next DOM update loop. Use the data immediately after modifying it, and then wait for the DOM update. It is the same as the global method Vue.nextTick, except that the callback this is automatically bound to the instance that calls it.

Similar to updated, this.$nextTick () can be used as a local data update after the end of the DOM update operation, the global can use the updated lifecycle function.

6-2, errorCaptured ()

When an error from a descendant component is caught, the hook receives three parameters: the error object, the component instance where the error occurred, and a string containing the error source information. This hook can return false to prevent the error from propagating upward.

7. Some usage scenarios of the life cycle

* * created:** acquires and initializes ajax request asynchronous data

* * acquisition of mounted:** mount element dom node

* * $nextTick:** operates dom immediately after updating data for a single event

* * updated:** updates to any data

On "what the life cycle of vue components refers to" this article is shared here, 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, please share it out 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.