前言
自定义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，可以将组件的逻辑和状态提取到可重用的函数中，从而使代码更加模块化和易于维护。
离别之花，在心中盛开， 哀愁的种子，生根发芽。 但愿这花，开得璀璨耀眼， 让离别的苦涩，化作芬芳的源泉。
