When I was asked about the mechanism of hook function on planet, I felt it was very necessary to use a special article to explain it. OK, let’s go over it quickly
What is a hook
Vue has a Hook function, Git commands have hooks, and Webpack’s plugin mechanism is also based on “Hook”.
Hooks are framework tools with a given life cycle. They are reserved for users to perform certain operations at each stage of the life cycle. This is actually a kind of section-oriented programming
There are two key words here, defined life cycle and aspect
Only has established the framework of life cycle tools need to reserve a user-defined hole operation, a simple chestnuts (in the case of students don’t know if that simple) : the workings of a gulp pipe flow is to define a serial of task, you can free the joining together of a variety of tasks, this is called no established life cycle, when the hook is meaningless; Webpack, on the other hand, has defined the entire workflow of analyzing, compiling, packaging, and exporting. If you want to do something after compiling before packaging the output, webPack doesn’t give you any hooks to step in, and that’s what hooks are all about. Remember which article these two pictures came from?
Why mention aspect? I first heard the term when I was writing Java, and it is one of the core ideas of Spring (admittedly, the front end has evolved from the Stone Age to today’s industrial age, borrowing a lot of programming ideas from behind the scenes, that’s what they say). Use your imagination, the so-called hook, is not at a certain stage of the frame tool, cut a knife, insert one or more specific operations, think about it
Second, the operation mechanism of hook
As mentioned earlier, a hook is a tool that performs one or more specific actions at a certain stage of a framework tool.
To be more straightforward, call a convention function at some stage in the framework tool lifecycle, such as Vue. When the component is finished rendering, call the Component mounted method. When the component is finished updating, execute the component’s updated method
At a certain stage of the life cycle, a specific event is triggered and all functions registered under the event are executed. When it comes to events, someone’s hair is still on his or her head. So, I drew a diagram:
The core of the publish-subscribe mechanism of events lies in the event pool. The party subscribing to events pushes the specific operation to a certain key value of the event pool. The party publishing events finds a certain key value of the event pool and executes all functions subscribed to in turn (there may be dependencies between functions)
9. It is easy to do the difficult things in the world
If you represent the above event pool by an in-memory hashMap, you should be able to easily collect the event pool.
In fact, the event mechanism of many framework tools is really no more than a hashMap to maintain, such as the Tapable used in Webpack
Three, Tapable introduction
Previously translated Tabpable documents while researching Webpack, to date, the only translated work (awkward ~), to go from there
Fourth, the latter
FMC front end is a knowledge community that allows knowledge to go deep into the principle. Welcome to add micro hook: Facemagic2014