Shulou(Shulou.com)05/31 Report--

This article focuses on "what is the vue lifecycle hook function". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what the vue life cycle hook function is.

Vue lifecycle hook function

The vue life cycle is a complete cycle of a component from birth to death.

It mainly includes the following four stages: create, mount, update, destroy.

Before creation: beforeCreate, after creation: created

BeforeMount before mounting and mounted after mounting

Before update: beforeUpdate, after update: updated

Before destruction: beforeDestroy, after destruction: destroyed

The hooks I usually use are created and mounted,created for obtaining background data, and mounted for doing some dom operations after dom is mounted, initializing plug-ins, etc. BeforeDestroy user clearing timers and unbinding events, etc.

In addition, it has been added to use the built-in component keep-alive to cache instances instead of creating and destroying them frequently (costly)

Actived instance activation

Failure of deactived instance

The following is a detailed version

As far as you understand ok:

Life cycle hook functions (11) Function (type). The blue one means that it belongs to the type.

BeforeCreate Function is called after instance initialization and before data observation (data observer) and event/watcher events are configured.

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

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

The hook is called after the mounted Function el is replaced by the newly created vm.el and mounted to the instance. If the root instance mounts an element in the document, the vm.$el is also in the document when mounted is called.

Called when beforeUpdate Function data is updated, before the virtual DOM is patched. This is a good place to access an existing DOM before updating, such as manually removing added event listeners. The hook is not called during server-side rendering because only the initial rendering takes place on the server side.

The hook is called after the virtual DOM of updated Function is re-rendered and patched due to data changes.

Called when the activated Function keep-alive component is activated. The hook is not called during server-side rendering.

Called when the deactivated Function keep-alive component is deactivated. The hook is not called during server-side rendering.

Called before the beforeDestroy Function instance is destroyed. At this step, the instance is still fully available. The hook is not called during server-side rendering.

Called after the destroyed Function Vue instance is terminated. After the call, everything indicated by the Vue instance is unbound, all event listeners are removed, and all child instances are destroyed. The hook is not called during server-side rendering.

ErrorCaptured (2.5.0 + added) (err: Error, vm: Component, info: string) = >? boolean is called when an error is caught from a descendant component. This 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.

Life cycle mounted and activated use, trample activated

When it comes to activated having to mention keep-alive, you will call it if you switch it out and cut it out. (you can understand it as a lifecycle hook function, and the usage is the same)

Mounted

It means that the instance is called after it is mounted. If there is no keep-alive to trigger the component every time it is switched back, but keep-alive will cache the inactive component instance, it can be said that it will only trigger once. So often some data requests have to write a request here and a request in activated to ensure that you can request new data when you come back.

Step on the pit

1. The keyword here is an example, which means that if you use $refs, you have to pay attention.

2.mounted is executed first, and the two are executed together when entering for the first time.

Postscript

Keep-alive is widely used.

At this point, I believe you have a deeper understanding of what the vue lifecycle hook function is, so you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.