如何在 Vue 3 中使用自定义 Hooks（组合式函数）来封装可复用的逻辑，并与 React Hooks 进行比较？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好，欢迎来到今天的“Vue 3 魔法学院”！今天我们要聊聊一个让代码变得像乐高积木一样，可以随意组合、无限复用的利器：Vue 3 的 Composition API，特别是如何用它来构建自定义 Hooks（官方称之为组合式函数）。

有些人可能会问：“Hooks？这听起来好像是 React 的东西啊！” 没错，React Hooks 的出现确实引领了一股函数式组件的风潮。但是，Vue 3 的 Composition API 吸收了它的优点，并以一种更 Vue 的方式实现了类似的功能。所以，准备好，让我们一起揭开 Vue 3 自定义 Hooks 的神秘面纱，顺便对比一下 React Hooks，看看它们之间有哪些异同。

第一幕：什么是 Hooks？为什么要用它？

想象一下，你正在开发一个电商网站，需要在多个组件中实现“获取用户地理位置”的功能。传统的做法是：

在每个组件中都写一遍获取地理位置的代码。
把获取地理位置的代码提取到一个 mixin 中，然后在每个组件中引入这个 mixin。

第一种方法会导致代码冗余，难以维护。第二种方法虽然解决了代码复用的问题，但 mixin 容易造成命名冲突，而且组件的数据来源不明确，使得代码的可读性变差。

这个时候，Hooks 就闪亮登场了！

Hooks 的本质是函数，它封装了一段可复用的逻辑，并且可以在组件中像普通函数一样调用。使用 Hooks 的好处包括：

代码复用性高：只需要编写一次逻辑，就可以在多个组件中使用。
可读性好：组件的数据来源明确，代码逻辑清晰。
易于维护：修改 Hooks 中的代码，可以影响到所有使用该 Hooks 的组件。
告别 Mixin 地狱：Hooks 避免了 Mixin 容易造成的命名冲突和数据来源不明确的问题。

第二幕：Vue 3 Composition API 基础回顾

在深入自定义 Hooks 之前，我们先来回顾一下 Vue 3 Composition API 的几个核心概念：

setup() 函数：这是 Composition API 的入口，组件的所有逻辑都应该在这个函数中编写。
响应式 API：ref()、reactive() 等函数用于创建响应式数据。
生命周期钩子：onMounted()、onUpdated() 等函数用于在组件的不同生命周期阶段执行代码。
computed() 和 watch()：用于创建计算属性和监听器。

如果你对这些概念还不太熟悉，建议先去查阅 Vue 3 的官方文档，或者复习一下相关的教程。

第三幕：编写你的第一个 Vue 3 自定义 Hook

现在，让我们来编写一个简单的自定义 Hook，用于记录组件的鼠标位置。

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useMouse() {
  const x = ref(0);
  const y = ref(0);

  function update(event) {
    x.value = event.clientX;
    y.value = event.clientY;
  }

  onMounted(() => {
    window.addEventListener('mousemove', update);
  });

  onUnmounted(() => {
    window.removeEventListener('mousemove', update);
  });

  return { x, y };
}

这个 Hook 做了以下几件事：

使用 ref() 创建了两个响应式变量 x 和 y，用于存储鼠标的坐标。
定义了一个 update() 函数，用于更新鼠标的坐标。
使用 onMounted() 钩子，在组件挂载后，监听 mousemove 事件，并调用 update() 函数。
使用 onUnmounted() 钩子，在组件卸载后，移除 mousemove 事件监听器。
返回一个包含 x 和 y 的对象，供组件使用。

接下来，我们可以在组件中使用这个 Hook：

<template>
  <div>
    鼠标位置：x: {{ x }}, y: {{ y }}
  </div>
</template>

<script>
import { useMouse } from './useMouse';

export default {
  setup() {
    const { x, y } = useMouse();

    return { x, y };
  }
};
</script>

在组件的 setup() 函数中，我们调用了 useMouse() Hook，并解构了返回的对象，得到了 x 和 y 变量。然后，我们将这两个变量返回，就可以在模板中使用它们了。

第四幕：更复杂的 Hooks：处理异步操作

上面的例子只是一个简单的 Hook，接下来，我们来编写一个更复杂的 Hook，用于处理异步操作。假设我们需要从服务器获取用户的信息。

// useUser.js
import { ref, onMounted } from 'vue';

export function useUser(userId) {
  const user = ref(null);
  const loading = ref(false);
  const error = ref(null);

  async function fetchUser() {
    loading.value = true;
    error.value = null;

    try {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      if (!response.ok) {
        throw new Error('Failed to fetch user');
      }
      user.value = await response.json();
    } catch (err) {
      error.value = err.message;
    } finally {
      loading.value = false;
    }
  }

  onMounted(() => {
    fetchUser();
  });

  return { user, loading, error, refetch: fetchUser };
}

这个 Hook 做了以下几件事：

使用 ref() 创建了三个响应式变量 user、loading 和 error，分别用于存储用户信息、加载状态和错误信息。
定义了一个 fetchUser() 函数，用于从服务器获取用户信息。
在 fetchUser() 函数中，我们使用了 async/await 语法，简化了异步操作的代码。
使用 onMounted() 钩子，在组件挂载后，调用 fetchUser() 函数。
返回一个包含 user、loading、error 和 refetch 的对象，供组件使用。refetch 允许组件手动重新获取用户数据。

在组件中使用这个 Hook：

<template>
  <div>
    <div v-if="loading">加载中...</div>
    <div v-if="error">错误：{{ error }}</div>
    <div v-if="user">
      用户名：{{ user.name }}
      <button @click="refetch">重新加载</button>
    </div>
  </div>
</template>

<script>
import { useUser } from './useUser';

export default {
  setup() {
    const { user, loading, error, refetch } = useUser(123); // 假设用户 ID 为 123

    return { user, loading, error, refetch };
  }
};
</script>

第五幕：Vue 3 Hooks vs React Hooks：异同分析

现在，让我们来对比一下 Vue 3 Hooks 和 React Hooks，看看它们之间有哪些异同。

特性	Vue 3 Hooks (组合式函数)	React Hooks
调用位置	只能在 `setup()` 函数中调用。	只能在函数组件和自定义 Hooks 中调用。
调用顺序	可以随意调用，没有严格的顺序要求。	必须按照固定的顺序调用，不能在条件语句或循环语句中调用。
依赖收集	Vue 3 的响应式系统会自动收集依赖，不需要手动声明依赖。	需要使用 `useEffect()` 的依赖项数组手动声明依赖，否则可能会导致闭包问题。
组件更新触发	当 Hook 中使用的响应式数据发生变化时，会自动触发组件的更新。	当 Hook 中使用的状态发生变化时，会自动触发组件的更新。
副作用处理	使用 `onMounted()`、`onUpdated()`、`onUnmounted()` 等生命周期钩子处理副作用。	使用 `useEffect()` 处理副作用，需要手动处理组件卸载时的清理工作。
命名规范	建议以 `use` 开头，例如 `useMouse`、`useUser`。	必须以 `use` 开头，例如 `useMouse`、`useUser`。
数据响应性	使用 `ref()` 和 `reactive()` 创建响应式数据，数据变化会自动触发视图更新。	使用 `useState()` 创建状态，状态变化会自动触发视图更新。
组件状态共享	通过将响应式数据放在 Hook 的外部，可以实现组件之间的状态共享（类似于 Vuex 的小规模应用）。	通过 `useContext()` 和 `Context` 对象，可以实现组件之间的状态共享（类似于 Redux）。
类型推断友好性	TypeScript 支持良好，可以轻松地进行类型推断。	TypeScript 支持良好，但有时需要手动指定类型。
灵活性	Composition API 更为灵活，可以根据需要自由组合不同的 Hook。	React Hooks 相对来说更加规范，但也限制了灵活性。
心智负担	Composition API 的学习曲线相对平缓，易于上手。	React Hooks 的学习曲线相对陡峭，需要理解闭包、依赖项等概念。

总的来说，Vue 3 Hooks 和 React Hooks 在设计理念上有很多相似之处，都是为了解决代码复用和组件逻辑组织的问题。但是，Vue 3 Hooks 更加灵活，易于上手，并且与 Vue 3 的响应式系统无缝集成。

第六幕：最佳实践：编写可维护的 Hooks

编写 Hooks 并不难，但是编写可维护的 Hooks 却需要一些技巧。以下是一些最佳实践：

保持 Hooks 的单一职责：一个 Hook 应该只负责一个特定的功能。
避免在 Hooks 中编写复杂的业务逻辑：Hooks 应该只负责封装通用的逻辑，复杂的业务逻辑应该放在组件中。
使用 TypeScript 进行类型检查：TypeScript 可以帮助你发现潜在的错误，并提高代码的可读性。
编写单元测试：单元测试可以确保你的 Hooks 能够正常工作。
提供清晰的文档：清晰的文档可以帮助其他开发者理解你的 Hooks 的用途和用法。

第七幕：总结与展望

今天，我们一起学习了 Vue 3 自定义 Hooks 的基本概念、用法和最佳实践。希望通过今天的课程，你已经掌握了使用 Vue 3 Hooks 来封装可复用逻辑的技能。

Vue 3 Hooks 是一个强大的工具，它可以帮助你编写更简洁、更可维护的代码。随着 Vue 3 的普及，越来越多的开发者会使用 Hooks 来构建复杂的应用程序。所以，赶快行动起来，开始你的 Vue 3 Hooks 之旅吧！

最后，记住：代码就像魔法，而 Hooks 就是你手中的魔杖。好好利用它，创造出属于你的代码奇迹！

感谢大家的参与，希望今天的讲座对你有所帮助！下次再见！

发表回复 取消回复

发表回复取消回复