Vue3- Use and Encapsulation Concept of Custom Hooks Functions

Vue series of articles

• Understanding v-memo in Vue3
• Understanding Suspense in Vue3
• Understanding reactive, isReactive and shallowReactive in Vue3
• Understanding defineModel in Vue3
• Understanding Fragment in Vue3
• Understanding Teleport in Vue3
• Understanding Async Components in Vue3
• Understanding v-model in Vue3
• Understanding watch and watchEffect in Vue3
• Understanding and Practice of the Vue3 Composition API
• Understanding Hooks in Vue3 (Why use hooks)
• Vue3- Use and Encapsulation Concept of Custom Hooks Functions
• Understanding the various ref in Vue3: toRef, toRefs, isRef, unref, etc
• Vue3 Development Solutions(Ⅰ)
• Vue3 Development Solutions(Ⅱ)
• The details about Vue3 that you didn’t know
• Vue3 develop document
• 28 Vue Interview Questions with Detailed Explanations

What are hooks?

In Vue3, hooks are a kind of function writing style, which essentially encapsulates certain independent functional Javascript code from a file.

The main purpose of it is that Vue3 draws from a mechanism in React, which is used to share state logic and side effects in function-based components, thereby improving code reusability.

Note: Hooks are somewhat similar to mixins in Vue2, but compared to mixins, hooks make it clearer where the reused code originates from, making it easier to understand.

Advantages of hooks

• Hooks encapsulate components as independent logic. Its internal attributes, functions, etc. have a reactive effect that’s associated to external components.
• The function of custom hooks is similar to the mixin technology used in Vue2, which is convenient and easy to use.
• It is highly cohesive and loosely coupled, and it is reusable when encapsulated with Vue3’s combination…