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

This article mainly introduces the relevant knowledge of "what is the use of callHook hook function in Vue". The editor shows you the operation process through an actual case. The operation method is simple and fast, and it is practical. I hope this article "what is the use of callHook hook function in Vue" can help you solve the problem.

The callHook method is called by Vue instances at different stages of their life cycle. For example, callHook (vm, 'beforeCreate') and callHook (vm,' created') are called when the instance is initialized (_ init).

The "beforeCreate" and "created" states here are not randomly defined, but come from the lifecycle hooks of the definition within Vue.

Var LIFECYCLE_HOOKS = ['beforeCreate',' created', 'beforeMount',' mounted', 'beforeUpdate',' updated', 'beforeDestroy',' destroyed', 'activated',' deactivated', 'errorCaptured']

Next, let's take a look at the source code that implements the hook function in Vue:

Function callHook (vm, hook) {/ / # 7573 disable dep collection when invoking lifecycle hooks pushTarget (); var handlers = vm.$options [hook]; if (handlers) {for (var I = 0, j = handlers.length; I < j; iSuppli +) {try {handlers [I] .call (vm);} catch (e) {handleError (e, vm, (hook + "hook")) } if (vm._hasHookEvent) {vm.$emit ('hook:' + hook);} popTarget ();}

Take an example to illustrate:

Let test = new Vue ({data: {a: 1}, created: function () {console.log ("this is Created");}})

Instantiate a Vue component test, defining data data and created methods for test. When the component is instantiated, callHook (vm,'created') is called internally by Vue (as explained above). When the callHook function is executed, Vue looks in the $options of the test component to see if created exists, and if so, executes the corresponding method of created. Console.log ("this is Created") will be executed here.

The function of callHook is to execute the user-defined hook function and point the this in the hook as the current component instance.

This is the end of the content about "what is the use of the callHook hook function in Vue". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.