Vue3实战笔记（40）—组件逻辑复用：自定义Hooks的完全指南

文章目录

• 前言
• 一、状态管理
• 二、副作用处理
• 三、 生命周期钩子
• 总结

前言

自定义Hooks是Vue3中的一个重要特性，它允许您创建可重用的函数，以便在组件之间共享状态和逻辑。以下是一些关于自定义Hooks的常见用法。

一、状态管理

使用reactive或ref来创建响应式数据，并在组件中使用这些数据。例如，您可以创建一个名为useCounter的自定义Hook，用于管理计数器的状态和操作。

import { reactive } from 'vue';

export default function useCounter() {
  const state = reactive({
    count: 0,
  });

  const increment = () => {
    state.count++;
  };

  return {
    state,
    increment,
  };
}

二、副作用处理

使用watch或watchEffect来监听响应式数据的变化，并执行相应的副作用。例如，您可以创建一个名为useFetch的自定义Hook，用于获取远程数据。

import { ref, watchEffect } from 'vue';
import axios from 'axios';

export default function useFetch(url) {
  const data = ref(null);
  const error = ref(null);

  watchEffect(async () => {
    try {
      const response = await axios.get(url);
      data.value = response.data;
    } catch (err) {
      error.value = err;
    }
  });

  return {
    data,
    error,
  };
}

三、 生命周期钩子

使用onMounted、onUnmounted等生命周期钩子来处理组件的生命周期事件。例如，您可以创建一个名为useInterval的自定义Hook，用于在组件挂载时启动定时器，并在卸载时清除定时器。）：

import { onMounted, onUnmounted } from 'vue';

export default function useInterval(callback, interval) {
  let timer;

  onMounted(() => {
    timer = setInterval(callback, interval);
  });

  onUnmounted(() => {
    clearInterval(timer);
  });
}

其实一直有个疑问，正好也记录一下，这样自定义hooks和utils封装工具类有什么区别？不是一回事儿吗？

Vue3中的Hooks和Utils确实存在区别。具体分析如下：

Vue3 Hooks：是与Vue运行时紧密相关的函数，它们通常在特定的生命周期阶段执行，或者与Vue的API（如响应式系统）交互。Hooks可以访问组件的上下文，如setup函数内的reactive、ref等响应式数据，以及生命周期钩子如onMounted。这些特性使得Hooks能够在组件间共享状态和副作用，类似于mixin，但更加灵活和强大。

Utils：通常是纯粹的函数或工具类方法，它们不依赖于Vue的运行时环境，也不包含响应式API。Utils的主要目的是封装通用逻辑，以便在不同的地方重复使用，而不特定于Vue组件的生命周期或状态管理。

总的来说，Hooks和Utils在Vue3中扮演着不同的角色。Hooks是为了在Vue组件中更好地管理状态和副作用，而Utils则是为了编写可重用的通用函数。在实际开发中，根据需要选择合适的模式来组织代码，可以使应用更加清晰和高效。

总结

通过创建自定义Hooks，可以将组件的逻辑和状态提取到可重用的函数中，从而使代码更加模块化和易于维护。

离别之花，在心中盛开， 哀愁的种子，生根发芽。 但愿这花，开得璀璨耀眼， 让离别的苦涩，化作芬芳的源泉。