Vue3，自定义hooks，实现逻辑代码封装，增强代码的复用性和可维护性（axios案例演示），Vue3自定义Hooks，实现逻辑代码封装，提升代码复用性与可维护性（axios案例详解）

Vue 3中通过自定义hooks实现逻辑代码封装，提高代码复用性和可维护性。通过创建可重用的自定义hooks，将复杂逻辑封装成小块，便于管理和调用。以axios为例，演示如何使用自定义hooks简化异步请求处理，提高代码简洁性和可读性。通过这种方式，开发者能更高效地编写可维护的高质量代码。

在Vue 2中，我们使用mixin来实现代码的封装与复用，而在Vue 3中，我们则使用hooks来达到同样的效果，所谓hook，其实质是一个函数，用于封装setup函数中使用的Composition API，我们可以使用js文件或者ts文件来封装这些hooks，hook的命名遵循一定的规范，即以"use"为前缀，后接具体的功能描述，如"useDog"、"useSum"等。

案例演示

1、创建hook

（1）useDog.ts

这是一个使用axios进行接口请求，获取数据并使用了生命周期函数onMounted的hook，代码示例如下：

import { reactive, onMounted } from 'vue';
import axios from 'axios';
export default function useDog() {
  // 数据
  const dogList = reactive([
    'https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg'
  ]);
  
  // 方法
  async function getDog() {
    try {
      const result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random');
      dogList.push(result.data.message);
    } catch (error) {
      alert(error);
    }
  }
  
  // 钩子
  onMounted(() => {
    getDog();
  });
  
  // 向外部提供数据和方法
  return { dogList, getDog };
}

（2）useSum.ts

这是一个简单的计算求和并提供了相关方法和计算属性的hook，代码示例如下：

import { ref, onMounted, computed } from 'vue';
export default function useSum() {
  // 数据
  const sum = ref(0);
  const bigSum = computed(() => sum.value * 10); // 使用computed创建计算属性，用于返回放大后的值。
  
  // 方法
  function add() {
    sum.value += 1; // 增加sum的值。
  }
  
  // 钩子函数的使用与上一示例相同，此处省略。
  // 向外部提供数据和方法，此处省略，与上一个示例类似，只需返回sum, add和bigSum即可，注意bigSum是一个计算属性而非普通的数据属性，因此它会自动更新，无需手动调用任何方法，只需在模板中使用即可，无需在组件中调用add方法，因为我们在onMounted钩子中已经调用了它一次，组件加载时会自动执行add方法一次，后续点击按钮时再次执行add方法即可实现累加功能，在模板中只需要提供一个按钮用于触发add方法即可，同时展示sum和bigSum的值以展示效果，这样我们就完成了对Vue组件的封装和复用性提升，通过对比Vue 2的mixin和Vue 3的hook的使用方式，我们可以发现它们在实现功能上是相似的，但在语法上存在一些差异，因此在实际开发中需要根据具体需求和版本选择合适的开发方式，同时也要注意保持代码的清晰和易于维护性以便于后续的维护和扩展工作顺利进行，同时也要注意样式的编写规范以确保页面呈现的效果符合预期的设计要求并提升用户体验和交互体验。