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

This article mainly explains "what are the features of Hook in Vue3". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the features of Hook in Vue3".

The concept of Hook

The concept of Hook was put forward in React. First of all, let's briefly introduce how Hook comes from in React.

Referring to the well-known Vue 2 code structure, we can see that React as a whole uses Class to encapsulate a component; a state is designed to manage variables, which is equivalent to the data; in Vue 2 also has a life cycle and custom methods; the template part is written into a rendering function with JSX. If you need to update the view, you must update the variables in the state through the setState method, and then the data on the view will be updated accordingly, and you cannot update the data directly by updating the view.

As you can see, unlike Vue, it is an one-way data flow. The pronunciation of Vue is the "view" of the view, and "state" means state. If Vue is view-oriented, React is state-oriented.

Since React implements components with Class, then the problem arises: attention must be paid to the pointing problem of this in Class; and when components are reused and nested, the props of each layer of components has to be operated, which is logically complex.

As a result, the function component is born, which implements the state separation for React.

Here, the declaration of variables, component methods, rendering functions are all encapsulated into a function, and a new useEffect is added to implement the life cycle and listen for changes in state data. When this component is declared, updated, or about to be destroyed, it will call the function that defines it and output a new view.

Let's look at how a component is defined in Vue 3:

Is it similar to the above? However, although the writing is very similar, they are still very different in implementation. As we mentioned earlier, React is state-oriented, while Vue is view-oriented. The React function component updates the view by re-calling the function, incorporating the life cycle into the component declaration; while the setup method of Vue only replaces beforeCreate and created, other life cycles are still defined within the component, and each instance only runs setup once, while listening for changes in views and data.

It is often said that Vue has implemented React again, but the concepts of the two are completely different. In fact, it can be understood that Vue adopts the design approach of React while retaining its own characteristics.

So what is Hook? The definition in React is that the life cycle function is integrated into the function component while retaining state data in the function component, and the component as a whole is treated as a hook function.

Custom Hook

When a component is complex, some repetitive logic in multiple components can be abstracted. Before the birth of Hook, both React and Vue had design patterns for high-level components, using HOC in React and mixin in Vue 2. Why should we abandon them and use Hook, and what are the advantages of using custom Hook? let's take a brief look at HOC and mixin, and we'll see after comparison.

The principle of HOC is to pass the component as a parameter to a function, add the reuse part and take the new component as the return value, using the decorator mode. Mixin is like disassembling the reused parts into small parts and splicing a component into it when needed.

In practice, mixin has the following disadvantages:

Implicit dependency is introduced.

There may be the problem of sequence or even code conflict coverage between different mixins

Mixin code can lead to snowball complexity

Multiple mixin causes merge item to have unknown source

To avoid these problems, React uses HOC, but it still has its drawbacks:

The state of one component affects the props of many components

Cause Hell nesting

However, using the brand-new Hook component structure, the reuse part of the tiled calling component can be realized, which solves the problem of unknown source of mixin and hell nesting of HOC.

Implementing Hook with Vue 3

As mentioned earlier, React transforms Class components into functional components, implementing Hook. In Vue 3, Hook is implemented through composite API, the most important part of Vue 3's new features.

Using combined API to write components, to put it simply, data, methods, life cycle, and so on, which were previously split according to data type, are all placed in a setup function, and the component only needs to call the setup function once during initialization. The specific API is not described in detail here, you can consult the official documents. (antfu explains combined API)

Using combinatorial API, you can emulate the writing of React to achieve a Hook. For example, this is an example of file system management:

Imagine that if this code is implemented in Vue 2, just an action to create a folder, you have to disassemble the declared variables, methods, listening data, etc., not to mention that we have to delete, edit, copy and paste, and so on, and the workload of modifying the code is huge.

But by writing in this form of Hook, we can combine the code that implements the same function, not only the code is very concise and clear, but also we can well know the source of the reuse component.

Compared with React's Hook,Vue 3, it also makes some optimizations at the bottom, which removes the restrictions of react function components and improves performance.

Thank you for your reading, the above is the content of "what is the Hook feature in Vue3". After the study of this article, I believe you have a deeper understanding of what the Hook feature in Vue3 is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.