一、概述

实际项目开发过程中，遇到接口重复使用，你会怎么处理？

再编写一遍一样的代码，还是复制之前代码？

vue3新增的hook函数，是封装和复用有状态逻辑的函数，可实现代码的复用

二、正常代码编写

下面使用 vue3 + ts 编写一个简单示例：接口获取数据，渲染页面

正常组件代码如下：

<script setup lang="ts">
import { ref } from 'vue';

interface IData {
  fundCode: string;
  fundName: string;
}
const listData = ref<IData[]>([]);
const loading = ref(false);

const loadData = () => {
  loading.value = true;
  fetch('/public/mock/data.json')
    .then(res => res.json())
    .then(res => {
      listData.value = res.data;
    })
    .finally(() => {
      loading.value = false;
    });
};
loadData();
</script>

<template>
  <div class="home">
    <template v-if="loading">
      <p>loading</p>
    </template>
    <template v-else>
      <ul v-for="item in listData" :key="item.fundCode">
        <li>{{ item.fundName }}</li>
      </ul>
    </template>
  </div>
</template>

三、hook函数提取

约定：hook函数约定用驼峰命名法命名，并以“use”作为开头

hook函数代码提取如下：

import { ref } from 'vue';

export const useGetListData = () => {
  interface IData {
    fundCode: string;
    fundName: string;
  }
  const listData = ref<IData[]>([]);
  const loading = ref(false);

  const loadData = () => {
    loading.value = true;
    fetch('/public/mock/data.json')
      .then(res => res.json())
      .then(res => {
        listData.value = res.data;
      })
      .finally(() => {
        loading.value = false;
      });
  };
  loadData();
  
  return {
    listData,
    loading
  };
//既可暴露状态，也可暴露方法
};

使用hook函数的组件如下：

<script setup lang="ts">
import { useGetListData } from './useGetListData';
const { listData, loading } = useGetListData();
</script>

<template>
  <div class="home">
    <template v-if="loading">
      <p>loading</p>
    </template>
    <template v-else>
      <ul v-for="item in listData" :key="item.fundCode">
        <li>{{ item.fundName }}</li>
      </ul>
    </template>
  </div>
</template>

如你所见，核心逻辑完全一致，我们做的只是把它移到一个外部函数中去，并返回需要暴露的状态

是不是很好理解！