VUE 3では、構(gòu)成APIを使用してカスタムフックを作成するコア方法は、使用から始まる関數(shù)を記述し、再利用可能なロジックをカプセル化することです。 1. ref、リアクティブ、ライフサイクルフック、その他のAPIを呼び出すことにより、機(jī)能的なカプセル化を?qū)g裝します。 2.フォームの処理、狀態(tài)、データ要求、およびuseclickoutsideやusefetchなどのその他のシナリオの管理によく使用されます。 3.命名仕様に従い、分解された友好的なオブジェクトを返し、副作用の汚染を避け、ループや條件で呼び出されないようにする必要があります。

構(gòu)成APIを使用してVUE 3にカスタムフックを書き込むことは、実際には通常の関數(shù)の書き込みに似ています。その中心的な目的は、処理フォーム、狀態(tài)の管理、データ収集のカプセル化など、ロジックを抽出して再利用することです。セットアップ機(jī)能とレスポンシブシステムの基本的な使用法を理解している限り、明確な構(gòu)造と簡単な再利用を備えたカスタムフックを簡単に書き込むことができます。

いくつかの一般的なシナリオから始めて、実際に適用する方法を見てみましょう。

基本的なカスタムフックを作成する方法

カスタムフックは基本的に機(jī)能であり、通常はuseから始まり、 ref 、 reactive 、ライフサイクルフック（ onMountedなど）または他の既存のフックを呼び出すことができます。

たとえば、ポップアップコンポーネントなどの「外部閉じる」機(jī)能を「クリック」したいと考えています。ロジックのこの部分は、 useClickOutsideに引き込むことができます。

 Import {onmounted、onunmounted、ref} from 'vue'から

エクスポート機(jī)能useclickoutside（）{
  const isoutside = ref（false）
  ターゲットエレメント= nullとします

  const handleclick =（event）=> {
    if（targetelement &&！targetelement.contains（event.target））{
      isoutside.value = true
    } それ以外 {
      isoutside.value = false
    }
  }

  onmounted（（）=> {
    window.addeventlistener（ 'click'、handleclick）
  }）

  onunmounted（（）=> {
    window.removeeventlistener（ 'click'、handleclick）
  }）

  return {isoutside、targetelement}
}

次に、コンポーネントで使用します。

 const {isoutside、targetelement} = useclickoutside（）

watcheffect（（）=> {
  if（isoutside.value）{
    //いくつかの緊密な操作を行う}
}）

このフックは、イベントのリスニングと判斷のロジックをカプセル化して、コンポーネントをきれいにします。

一般的な用途：データをカプセル化するデータリクエストロジック

多くのプロジェクトは、インターフェイスリクエストを均一に処理する必要がある狀況に遭遇します。この時(shí)點(diǎn)で、一般的なuseFetchフックを書くことができます。

 'vue'から{ref、onmounted}をインポート

エクスポート関數(shù)usefetch（url）{
  const data = ref（null）
  const loading = ref（true）
  const error = ref（null）

  onmounted（async（）=> {
    試す {
      const res = await fetch（url）
      data.value = await res.json（）
    } catch（err）{
      error.value = err
    } ついに {
      loading.value = false
    }
  }）

  {data、loading、error}を返します
}

コンポーネントでの使用：

 const {data、loading、error} = usefetch（ 'https://api.example.com/data'）

if（loading.value）{
  //読み込みステータスを表示}

if（error.value）{
  //エラーメッセージを表示}

このカプセル化方法により、複數(shù)の場所で再利用し、一貫したデータ処理フローを維持できます。

メモとベストプラクティス

• 命名仕様： useXxxの形式を使用して、それが一目でフックであることを伝えるようにしてください。
• 返品値は明確である必要があります。返されたコンテンツは、ユーザーがオンデマンドで導(dǎo)入できるように、フレンドリーなオブジェクトを分解するのに最適です。
• 副作用の汚染を避けてください： onMountedまたはwatchを使用する場合は、イベントリスナーの削除や登録解除など、副作用をクリーンアップすることを忘れないでください。
• ループや條件でフックを呼び出さないでください：構(gòu)成APIでは、セットアップの最上位レベルでフックを呼び出す必要があります。そうしないと、エラーが発生する場合があります。

基本的にそれだけです。 Vueの構(gòu)成APIは、カスタムフックを非常に自然にします。論理的境界を明確にし、明確で保守可能なコードを記述するだけです。クリックの外部クリックや上記のデータ要求などの機(jī)能は、この方法で均一に抽象化することができ、開発効率を向上させることができます。

以上が構(gòu)成APIチュートリアルを備えたVueカスタムフックの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。