前言

自定義Hooks是Vue3中的一個重要特性，它允許您創(chuàng)建可重用的函數(shù)，以便在組件之間共享狀態(tài)和邏輯。以下是一些關(guān)于自定義Hooks的常見用法。

一、狀態(tài)管理

使用reactive或ref來創(chuàng)建響應(yīng)式數(shù)據(jù)，并在組件中使用這些數(shù)據(jù)。例如，您可以創(chuàng)建一個名為useCounter的自定義Hook，用于管理計(jì)數(shù)器的狀態(tài)和操作。

import { reactive } from 'vue';

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

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

  return {
    state,
    increment,
  };
}

二、副作用處理

使用watch或watchEffect來監(jiān)聽響應(yīng)式數(shù)據(jù)的變化，并執(zhí)行相應(yīng)的副作用。例如，您可以創(chuàng)建一個名為useFetch的自定義Hook，用于獲取遠(yuǎn)程數(shù)據(jù)。

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等生命周期鉤子來處理組件的生命周期事件。例如，您可以創(chuàng)建一個名為useInterval的自定義Hook，用于在組件掛載時啟動定時器，并在卸載時清除定時器。）：

import { onMounted, onUnmounted } from 'vue';

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

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

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

其實(shí)一直有個疑問，正好也記錄一下，這樣自定義hooks和utils封裝工具類有什么區(qū)別？不是一回事兒嗎？

Vue3中的Hooks和Utils確實(shí)存在區(qū)別。具體分析如下：

Vue3 Hooks：是與Vue運(yùn)行時緊密相關(guān)的函數(shù)，它們通常在特定的生命周期階段執(zhí)行，或者與Vue的API（如響應(yīng)式系統(tǒng)）交互。Hooks可以訪問組件的上下文，如setup函數(shù)內(nèi)的reactive、ref等響應(yīng)式數(shù)據(jù)，以及生命周期鉤子如onMounted。這些特性使得Hooks能夠在組件間共享狀態(tài)和副作用，類似于mixin，但更加靈活和強(qiáng)大。

Utils：通常是純粹的函數(shù)或工具類方法，它們不依賴于Vue的運(yùn)行時環(huán)境，也不包含響應(yīng)式API。Utils的主要目的是封裝通用邏輯，以便在不同的地方重復(fù)使用，而不特定于Vue組件的生命周期或狀態(tài)管理。

總的來說，Hooks和Utils在Vue3中扮演著不同的角色。Hooks是為了在Vue組件中更好地管理狀態(tài)和副作用，而Utils則是為了編寫可重用的通用函數(shù)。在實(shí)際開發(fā)中，根據(jù)需要選擇合適的模式來組織代碼，可以使應(yīng)用更加清晰和高效。

總結(jié)

通過創(chuàng)建自定義Hooks，可以將組件的邏輯和狀態(tài)提取到可重用的函數(shù)中，從而使代碼更加模塊化和易于維護(hù)。

離別之花，在心中盛開， 哀愁的種子，生根發(fā)芽。 但愿這花，開得璀璨耀眼， 讓離別的苦澀，化作芬芳的源泉。