很多用 vue3 的开发者都遇到过这样的问题：多个组件里有几乎一样的逻辑代码。比如，好几个页面都要处理加载状态、都要调用同一个 api、都要做防抖处理。复制粘贴代码？后面改一个地方就要到处找，太麻烦！Vue3 提供的 组合式 API (Composition API) 和 自定义 Hook 就是来解决这个痛点的，它能让你把逻辑像乐高积木一样打包复用。

什么是 Vue3 Hook？

简单说，Vue3 Hook 就是一个 JavaScript 函数，它专门用来封装和复用 Vue 组件里的逻辑。这个函数内部可以自由使用 Vue3 的核心功能，比如 ref、reactive、computed、watch，甚至调用其他 Hook。

它为什么强大？

1. 逻辑复用： 把组件里零散的功能（像数据获取、事件监听、状态管理）打包成一个函数，哪个组件需要就调用它。

2. 代码清晰： 组件文件变小了，只关注模板和引入的逻辑块，容易看懂也容易维护。

3. 功能解耦： 不同功能的逻辑放在不同的 Hook 里，互不干扰，修改一个不影响另一个。

手把手写一个实用 Hook：管理 Loading 状态

想象一下，很多页面在点击按钮调用 API 时都需要显示“加载中...”的提示。我们用 Hook 来搞定它。

// useLoading.js
import { ref } from 'vue';

export function useLoading(initialState = false) {
  // 创建一个响应式的 loading 状态，默认是传入的值（或 false）
  const isLoading = ref(initialState);

  // 启动 loading
  const startLoading = () => {
    isLoading.value = true;
  };

  // 结束 loading
  const stopLoading = () => {
    isLoading.value = false;
  };

  // 包裹一个异步任务，自动处理 loading 状态
  const withLoading = async (task) => {
    try {
      startLoading();
      const result = await task(); // 执行传入的异步函数
      return result;
    } finally { // 无论成功失败，都结束 loading
      stopLoading();
    }
  };

  // 把状态和方法都暴露给使用的组件
  return {
    isLoading,      // 当前是否正在加载 (响应式 ref)
    startLoading,   // 手动开始加载
    stopLoading,    // 手动结束加载
    withLoading     // 自动处理异步任务的加载状态
  };
}

在 Vue 组件中使用这个 Hook

现在，任何需要处理加载状态的组件，只需要几行代码：

<script setup>
import { useLoading } from './useLoading';

// 使用 Hook，获取它提供的方法和状态
const { isLoading, withLoading } = useLoading();

// 模拟一个异步请求，比如获取用户数据
const fetchUserData = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ name: '张三', age: 30 }); // 模拟 API 返回数据
    }, 1500);
  });
};

// 按钮点击事件处理函数，用 withLoading 包裹异步请求
const handleClick = async () => {
  const userData = await withLoading(fetchUserData);
  console.log('获取到的用户数据:', userData);
};
</script>

<template>
  <div>
    <button @click="handleClick" :disabled="isLoading">
      {{ isLoading ? '加载中...' : '获取用户信息' }}
    </button>
  </div>
</template>

看看效果：

1. 点击按钮，handleClick 被调用。

2. withLoading(fetchUserData) 先启动 loading (isLoading 变成 true)，按钮显示“加载中...”并禁用。

3. 等待 fetchUserData 这个异步任务完成（模拟 1.5 秒）。

4. 任务完成（或失败），finally 块保证 stopLoading 被调用，isLoading 变回 false，按钮恢复。

5. 组件成功拿到用户数据。

还能封装哪些常用 Hook？

• useFetch： 封装数据请求（GET/POST），自动处理 URL、参数、loading、错误。搜索关键词：Vue3 useFetch Hook 封装。

• useWindowResize： 监听浏览器窗口大小变化，实时更新组件。搜索关键词：Vue3 响应式窗口大小 Hook。

• useLocalStorage： 方便地读写浏览器 localStorage，数据是响应式的。搜索关键词：Vue3 localStorage 状态管理 Hook。

• useDebounce / useThrottle： 处理频繁触发的事件（如搜索框输入、滚动）。搜索关键词：Vue3 防抖节流 Hook 实现。

• useMousePosition： 跟踪鼠标在页面上的位置。搜索关键词：Vue3 鼠标坐标跟踪 Hook。

为什么说 Vue3 Hook 开发效率高？

1. 少写重复代码： 通用逻辑写一次，各处调用。

2. 项目更好维护： 逻辑集中管理，修 bug 或加功能只改 Hook 文件。

3. 组件更干净： 组件文件变小，只放跟当前页面紧密相关的内容。

4. 团队协作更顺： 建立团队 Hook 库，新人快速上手，统一代码风格。

总结

Vue3 Hook（自定义组合式函数） 是提升开发效率和项目质量的重要工具。它解决了组件间逻辑复用难的痛点，让代码组织更清晰、更模块化。通过将通用功能（如加载状态、数据请求、事件监听）封装成独立的 Hook 函数，开发者可以像搭积木一样构建组件，显著减少重复代码。学习并应用 Vue3 Hook，是每一个想写出更简洁、更易维护 Vue 应用开发者的必备技能。开始尝试将你项目中的通用逻辑抽成 Hook，体验开发效率的提升吧！