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则是为了编写可重用的通用函数。在实际开发中，根据需要选择合适的模式来组织代码，可以使应用更加清晰和高效。