自定义 Hook

1. 什么是 hook？

hook 本质上是一个函数，它将 setup 函数中使用的 Composition API 进行了封装，类似于 Vue2.x 中的 mixin。通过自定义 hook，可以将逻辑进行抽离和复用，使 setup 函数中的代码更加清晰和易于维护。

2. 自定义 hook 的优势

• 复用代码：将通用的逻辑封装在一个 hook 函数中，可以在多个组件中复用。
• 逻辑分离：将复杂的逻辑抽离到单独的 hook 中，使 setup 函数中的代码更加简洁明了。
• 易于维护：修改 hook 函数中的逻辑，可以同步影响到使用该 hook 的所有组件，提升代码的可维护性。

3. 自定义 Hook 的语法

自定义 Hook 是通过函数封装组合式 API (ref, reactive, computed, watch, 等) 来实现的。一个自定义 Hook 通常返回一个对象，包含需要暴露给外部的数据和方法。

定义自定义 Hook 的基本步骤

1. 创建 Hook 函数：定义一个函数，将组合式 API 封装在其中。
2. 使用组合式 API：在 Hook 函数中使用 ref、reactive、onMounted 等 API。
3. 暴露数据和方法：通过返回对象的方式，将需要的数据和方法暴露给外部使用。

4. 自定义hook（用于计数）

useSum.ts 中内容如下：定义一个自定义 hook 用于管理一个简单的计数逻辑。

import { ref, onMounted } from 'vue';

// 定义 useSum 自定义 Hook
export default function useSum() {
  // 定义响应式数据 sum
  let sum = ref(0);

  // 定义 increment 方法
  const increment = () => {
    sum.value += 1;
  };

  // 定义 decrement 方法
  const decrement = () => {
    sum.value -= 1;
  };

  // 在组件挂载时调用 increment 方法
  onMounted(() => {
    increment();
  });

  // 向外部暴露数据和方法
  return { sum, increment, decrement };
}

5. 自定义hook（用于获取图片并管理）

useDog.ts 中内容如下：定义一个自定义 hook 用于获取狗狗图片，并管理相关状态。

import { reactive, onMounted } from 'vue';
import axios, { AxiosError } from 'axios';

// 定义 useDog 自定义 Hook
export default function useDog() {
  // 定义响应式数据 dogList
  let dogList = reactive<string[]>([]);

  // 定义获取狗狗图片的方法 getDog
  async function getDog() {
    try {
      // 发送请求获取狗狗图片
      let { data } = await axios.get('https://dog.ceo/api/breed/pembroke/images/random');
      // 维护数据
      dogList.push(data.message);
    } catch (error) {
      // 处理错误
      const err = error as AxiosError;
      console.log(err.message);
    }
  }

  // 在组件挂载时调用 getDog 方法
  onMounted(() => {
    getDog();
  });

  // 向外部暴露数据和方法
  return { dogList, getDog };
}

6. 组件中使用自定义hook

<template>
  <div>
    <!-- 使用 useSum 提供的数据和方法 -->
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="increment">点我+1</button>
    <button @click="decrement">点我-1</button>
    <hr>
    <!-- 使用 useDog 提供的数据和方法 -->
    <img v-for="(url, index) in dogList" :key="index" :src="url">
    <button @click="getDog">再来一只狗</button>
  </div>
</template>

<script lang="ts" setup>
import useSum from './hooks/useSum';
import useDog from './hooks/useDog';

// 使用自定义 Hook
let { sum, increment, decrement } = useSum();
let { dogList, getDog } = useDog();
</script>

通过自定义 hook，可以将组件中重复的逻辑提取出来，封装成独立的函数。这样在需要使用这些逻辑的组件中，只需导入并调用自定义 hook，即可复用这些逻辑。自定义 hook 提升了代码的可读性和可维护性，是 Vue3 组合式 API 的一大亮点。