Vue3 Hooks 完全指南：从基础用法到异步操作实践

一、引言：为什么需要 Vue3 Hooks？

在 Vue 3 中，Composition API 的引入带来了全新的组件开发模式。Hooks（通常以 use 开头的函数）作为 Composition API 的核心特性，允许开发者以函数形式组织和复用组件逻辑，彻底改变了传统 Options API 中基于配置对象的开发方式。相比之下，Hooks 具有以下显著优势：

• 逻辑复用更灵活：告别 mixin 的命名冲突问题，通过函数封装实现细粒度逻辑共享

• 代码组织更清晰：按逻辑关注点拆分代码，避免 Options API 中生命周期钩子的碎片化

• 类型推导更友好：对 TypeScript 的支持更加原生，类型推断更精准

本文将通过具体案例，从基础用法到复杂异步场景，全面解析 Vue3 Hooks 的核心玩法。

二、基础篇：从零构建第一个自定义 Hook

2.1 什么是 Vue3 Hooks？

Hooks 是一个返回对象（包含响应式数据、方法、生命周期钩子）的函数，本质是对 Vue 响应式系统和生命周期的封装。典型结构如下：

import { ref, onMounted } from 'vue';
 
export function useCounter(initialValue = 0) {
  // 响应式状态
  const count = ref(initialValue);
  
  // 生命周期钩子
  onMounted(() => {
    console.log('Counter mounted');
  });
  
  // 业务逻辑
  const increment = () => count.value++;
  const decrement = () => count.value--;
 
  // 暴露接口
  return { count, increment, decrement };
}

2.2 在组件中使用 Hook

在 <script setup> 单文件组件中使用 Hook 非常简洁：

<template>
  <div>
    <p>Count: {
  { count }}</p>