Vue 3 Hooks封装、使用流程

封装 Vue 3 Hooks 是一种提升组件复用性和可维护性的优秀实践。Hooks 提供了一种函数式的方式来使用 Vue 的生命周期和响应式特性。
下面我会展示如何封装一个通用的 fetch 数据的 Hook —— useFetch

1. 创建 Hook 文件
首先，在你的项目的 src/hooks 目录中，创建一个文件 useFetch.js (如果没有 hooks 目录，记得先创建)。

2. 编写 useFetch Hook
在这个文件中，我们将定义 useFetch 函数，它返回一个对象，包含数据、状态和重试方法。

// src/hooks/useFetch.js
import { ref, onMounted, onUnmounted } from 'vue';

/**
 * 封装的 fetch hook
 * @param {string} url - 请求URL
 * @param {Object} options - fetch请求参数
 * @param {Function} [callback] - 可选的回调函数
 */
export function useFetch(url, options = {}, callback) {
    const data = ref(null);
    const loading = ref(true);
    const error = ref(null);

    // 尝试获取数据
    const fetchData = async () => {
        try {
            const response = await fetch(url, options);
            if (!response.ok) throw new Error('Network error');
            data.value = await response.json();
            loading.value = false;
            callback && callback(data.value);
        } catch (e) {
            error.value = e.message;
            loading.value = false;
        }
    };

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

    onUnmounted(() => {
        // 清理可能存在的副作用
    });

    // 返回的数据和方法
    return {
        data,
        loading,
        error,
        fetchData,
    };
}

3. 使用 useFetch
在组件中使用这个 Hook：

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">{{ error }}</div>
  <div v-else>{{ data }}</div>
</template>

<script>
import { useFetch } from '@/hooks/useFetch';

export default {
  setup() {
    const { data, loading, error, fetchData } = useFetch('/api/some-endpoint');

    return {
      data,
      loading,
      error,
      fetchData,
    };
  },
};
</script>

注意事项

• 确保在你的项目中正确地导入了 Vue 的 API (ref, onMounted, onUnmounted) 和原生的 fetch 方法。
• 在生产环境中，你可能需要使用更复杂的错误处理和重试逻辑。
• 这个例子中的 useFetch Hook 是一个简单实现，可以根据实际需求进行扩展和优化。

通过这种方式封装 Hooks，可以显著提高代码的可读性和可复用性，同时简化组件逻辑。