Understanding and Using Custom Hooks (Composition API) in Vue 3

Introduction

When first learning Vue 3, many developers feel confused about custom hooks (called Composition API in the official docs). This article shares the author’s experience, explains why custom hooks are not mandatory but helpful for logic reuse, and shows how to learn them effectively.

What is the Composition API?

The Composition API is a collection of functions that let you write Vue components using functions instead of the Options API.

Although it is function‑based, it is not functional programming; it builds on Vue's mutable, fine‑grained reactivity system.

The main advantage is concise and efficient logic reuse, solving the drawbacks of mixins.

How to Use Custom Hooks

Custom hooks can be categorized into two types:

Business‑specific hooks that extract reusable logic for a single project.

Globally reusable hooks for common features such as dialogs, tables, or forms.

Business‑Specific Hook Example

In a low‑code project, the author needed to share a status property across many components (input, select, switch). By extracting this logic into a custom hook, each component can simply import the hook instead of duplicating code.

Highly Reusable Hook Examples

1) Changing the Page Title

Instead of writing title‑setting code on every page, a hook can be imported and used with a single line:

const setTitle = useTitle('测试')

2) Table Pagination and CRUD Operations

Common table logic (pagination, CRUD, loading state) can be encapsulated in a hook that any project can reuse, avoiding repetitive implementations.

Recommended Vue 3 Hook Libraries and Articles

VueUse – Official Vue 3 community project (e.g., useResizeObserver , useTitle , useClipboard , useDraggable ).

ahooks‑vue – Vue port of ahooks (e.g., useRequest , useAxios , useFullscreen , useTable ).

Personal Hook Libraries – Various community‑maintained collections such as vue-hooks , vue-use-web , vue-hooks-plus , each offering dozens of high‑quality hooks.

Admin Templates – Projects like vue‑vben‑admin and vue3‑antd‑admin provide ready‑made hooks for tables, scrolling, event listeners, i18n, modals, etc.

Conclusion

The author shares a curated list of Vue 3 hook resources gathered over years of work, hoping they help others improve component reuse and code cleanliness. Readers are encouraged to contribute their own hook solutions, and the author plans to create a new library named jym‑hooks to rival vueuse .