Vue3 中 Hooks 的使用方法

在 Vue3 的生态体系里，Hooks 是一项极为实用的特性，它能极大地提升代码的可复用性与逻辑性，帮助开发者更高效地构建应用。

Vue3 Hooks 本质上是一个函数，它允许我们在不编写新的组件的情况下复用有状态的逻辑。比如在多个组件中都需要实现数据的获取与加载状态管理，传统方式下可能需要在每个组件中重复编写相似代码，而使用 Hooks 就能将这部分逻辑提取出来，实现一次编写多处复用。

创建一个自定义 Hooks 非常简单。定义一个函数，函数名通常以 “use” 开头，这是 Vue 社区约定俗成的命名规范。在函数内部，可以使用 Vue3 的响应式 API，如 reactive 和 ref 来创建响应式数据，使用 watch 和 computed 来处理副作用和计算属性。例如，创建一个用于处理数据加载的 useDataFetching Hooks：

import { ref } from 'vue';

export const useDataFetching = () => {
  const data = ref(null);
  const isLoading = ref(false);
  const error = ref(null);

  const fetchData = async (url) => {
    isLoading.value = true;
    try {
      const response = await fetch(url);
      const result = await response.json();
      data.value = result;
    } catch (e) {
      error.value = e;
    } finally {
      isLoading.value = false;
    }
  };

  return { data, isLoading, error, fetchData };
};

在组件中使用这个 Hooks 也很便捷：

<template>
  <div>
    <button @click="fetchData('https://example.com/api/data')">加载数据</button>
    <div v-if="isLoading">加载中...</div>
    <div v-if="error">加载错误: {{ error.message }}</div>
    <div v-if="data">数据: {{ data }}</div>
  </div>
</template>

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

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

Vue3 Hooks 还可以与生命周期函数结合使用。通过 onMounted、onUnmounted 等函数，在 Hooks 中处理组件生命周期相关的逻辑，进一步增强代码复用性。

Vue3 中的 Hooks 为开发者提供了一种强大的代码组织和复用方式，能够有效减少冗余代码，提升开发效率，让代码结构更加清晰易维护，是 Vue3 开发中不可或缺的重要工具。