Let’s talk about what vue life cycle hook functions are and when they are triggered

This article brings you relevant knowledge about vue. It mainly introduces what the vue life cycle hook functions are and when they are triggered. The vue life cycle is a component from birth to Let’s take a look at a complete cycle of death. I hope it will be helpful to everyone.

[Related recommendations: javascript video tutorial, vue.js tutorial】

vue life cycle hook Function

Vue life cycle is a complete cycle from birth to death of a component

Mainly includes the following 4 stages: creation, mounting, update, destruction

• Before creation: beforeCreate, after creation: created
• Before mounting: beforeMount, after mounting : mounted
• Before update: beforeUpdate, After update: updated
• Before destruction: beforeDestroy, after destruction: destroyed

The hooks I usually use more often are created and mounted. Created is used to obtain background data, and mounted is used after the dom is mounted. Do some dom operations, initialize plug-ins, etc. beforeDestroy user clears timers and unbinding events, etc.

In addition, it also adds the use of built-in component keep-alive to cache instances instead of frequent creation and destruction (overhead Large)

• actived Instance activation
• deactived Instance failure

The following is the detailed version

It’s ok if everyone understands:

Life cycle hook function (11) Function (type), the one marked in blue means that it belongs to the type.

• beforeCreate Function is called after instance initialization and before data observer and event/watcher event configuration.

• #created Function is called immediately after the instance is created. At this step, the instance has completed the following configuration: data observer, operations on properties and methods, and watch/event event callbacks. However, the mount phase has not started yet, and the $el attribute is not currently visible.

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

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

• beforeUpdate Function is called when the data is updated, which occurs before the virtual DOM is patched. This is suitable for accessing the existing DOM before updating, such as manually removing an added event listener. This hook is not called during server-side rendering, since only the initial rendering occurs on the server side.

• updated Function This hook is called after virtual DOM re-rendering and patching due to data changes.

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

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

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

• destroyed Function is called after the Vue instance is destroyed. When called, everything pointed to by the Vue instance will be unbound, all event listeners will be removed, and all child instances will be destroyed. This hook is not called during server-side rendering.

• errorCaptured (new in 2.5.0) (err: Error, vm: Component, info: string) => ?boolean when capturing an error from a descendant component is called. This hook receives three parameters: the error object, the component instance where the error occurred, and a string containing information about the source of the error. This hook can return false to prevent the error from propagating further upwards.

Life cycle mounted and activated use and pitfalls

activated

Speaking of activated, I have to mention it keep-alive, it will be called when you switch out and back out. (You can understand it as a life cycle hook function, and the usage is the same)

mounted

refers to being called after the instance is mounted. If there is no keep-alive, it will be called every time The component will trigger once when you switch back, but keep-alive will cache inactive component instances, so it can be said that it will only trigger once. Therefore, for some data requests, you often need to write a request here and a request in activated to ensure that you can still request new data when you return.

Step on the Pit

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

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

PS

keep-alive has many, many applications.

[Related recommendations: javascript video tutorial, vue.js tutorial】

The above is the detailed content of Let’s talk about what vue life cycle hook functions are and when they are triggered. For more information, please follow other related articles on the PHP Chinese website!