Vue3 如何自定义 Hooks

在 Vue3 的开发中，自定义 Hooks 是一项强大的功能，它能极大地提高代码的复用性和可维护性。下面就来详细探讨如何在 Vue3 中自定义 Hooks。

理解什么是 Hooks。Hooks 本质上是一个函数，它允许我们在不编写新的组件的情况下复用有状态的逻辑。Vue3 提供了一些内置的 Hooks，如 useState、useEffect 等，而自定义 Hooks 则让我们能够根据具体业务需求创建自己的逻辑复用模块。

创建一个自定义 Hook 非常简单。以一个简单的获取数据的 Hook 为例，我们可以这样写：

import { ref, onMounted, onUnmounted } from 'vue';

export const useFetchData = () => {
  const data = ref(null);
  const error = ref(null);

  const fetchData = async () => {
    try {
      const response = await fetch('https://example.com/api/data');
      const result = await response.json();
      data.value = result;
    } catch (e) {
      error.value = e;
    }
  };

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

  onUnmounted(() => {
    // 这里可以添加一些清理逻辑，比如取消网络请求
  });

  return {
    data,
    error,
    fetchData
  };
};

在上述代码中，我们定义了一个 useFetchData 的 Hook。通过 ref 创建了 data 和 error 两个响应式变量，用于存储获取到的数据和可能出现的错误。fetchData 函数负责发起网络请求并处理结果。onMounted 钩子函数在组件挂载时触发 fetchData，onUnmounted 则可以用于清理逻辑。

在组件中使用这个自定义 Hook 也很方便：

<template>
  <div>
    <h1>自定义 Hook 示例</h1>
    <div v-if="error.value">
      {{ error.value.message }}
    </div>
    <div v-if="data.value">
      {{ data.value }}
    </div>
    <button @click="fetchData">重新获取数据</button>
  </div>
</template>

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

const { data, error, fetchData } = useFetchData();
</script>

通过这样的方式，我们将获取数据的逻辑封装在自定义 Hook 中，多个组件都可以复用这个逻辑。

自定义 Hooks 是 Vue3 开发中的一个重要技巧，它让代码结构更加清晰，提高了代码的可维护性和复用性。掌握自定义 Hooks 的使用，能让我们在 Vue3 项目开发中更加高效。