フックとは

Hooks テクノロジーは、2018 年に React チームの Sophie Alpert と Dan Abramov によって初めて提案されました。元々は、React クラスコンポーネントにおける状態ロジックの再利用の問題を解決するために提案されました。React がクラスコンポーネントを使用する場合、状態ロジックを再利用するには、上位コンポーネントまたは Render Props を使用する必要があり、コードが複雑になり、メンテナンスコストが増加します。Hooks テクノロジーは、特定の関数を使用して React の状態やライフサイクル、その他の特性を「フック」するテクノロジーです。これにより、関数コンポーネントで状態やその他の React 機能を使用し、従来のクラスコンポーネントや高次のコンポーネントを置き換えることができます。

Vue 3.0 は React Hooks と同じ概念を直接導入しているわけではなく、Composition API と呼ばれるフックに似た API を導入していますが、両者の概念は若干異なります。構成 API は、より良いコード構成とロジックを再利用する方法を提供することを目的としています。これは、Vue 3 アプリケーションでロジックベースの構成を簡単に使用できるようにする API のセットであり、オプションの使用時に発生する制限のいくつかを解決しようとします。 API と欠陥。

vue3 の公式ドキュメントにはフックテクノロジの使用について言及されていませんが、vue3 の複合 API には常にフックの影が見られます。たとえば、vue3 の onMounted、onUpdated、onUnmounted はすべてフックと見なされます。これらのフックは、Vue のライフサイクルと関数コンポーネントの状態メソッドにアクセスするのに役立ちます。

フックをカスタマイズする方法

カスタムフックは、コンポーネントロジックを処理するためのパターンです。これにより、コンポーネント間でコードをコピーアンドペーストすることなく、状態ロジックを再利用できるようになります。カスタムフックは単純な JavaScript 関数ですが、使用する場合は、次の 2 つの重要な (暗黙の) 命名規則に従う必要があります。

それらは使用することから始まります。
他のフックを呼び出すことができます。

作成するコードがこれら 2 つの規則に準拠している場合は、独自のフックを作成して Vue コンポーネントで使用できます。通常、src フォルダーの下に新しいフックフォルダーを作成し、プログラムで使用されるフックコードを均一に格納します。

以下の例を使用して簡単なフックを作成しましょう。src フォルダーの下に新しいフックフォルダーを作成した後、その中に新しい useCounter.js ファイルを作成します。コードは次のとおりです。

import {
    
     reactive,toRefs } from "vue";
export default function useCounter() {
    
    
  const state = reactive({
    
    
    count:0
  })
  function increment() {
    
    
    state.count++
  }
  return {
    
    
    ...toRefs(state),
    increment
  }
}

このコードは、useCounter.js という名前のファイルをカスタムフックとして定義します。このファイルは、reactive を使用して応答状態オブジェクトを作成し、count プロパティと increment メソッドを含むオブジェクトを返します。

以下では、Vue コンポーネントに useCounter を導入し、それを setup 関数で呼び出します。

<template>
  {
    
    {
    
     count }}
  <button @click="increment">add</button>
</template>

<script setup>
import useCounter from './hooks/useCounter';
const {
    
     count,increment } = useCounter()
</script>

<style scoped>
</style>

上記のコードでは、上で定義したフック関数 useCounter を App.vue に導入し、内部でカウントとインクリメントを分解し、それをテンプレートで直接使用しています。このフックの使用方法により、コードが非常に簡潔になることがわかります。。

カスタムフックの書き方

実際、上記のカスタムフックの紹介では、すでにカスタムフックを作成しています。カスタムフックの作成は、内部のコードロジックが正しい限り、公開される再利用可能な JS コードフラグメントを定義するだけです。このコード部分には任意の名前を付けることができますが、コードの読みやすさを維持するために、フックコードスニペットを定義するときは、上記の 2 つの業界のデフォルトの命名規則に従う必要があります。

それらは使用することから始まります。
他のフックを呼び出すことができます。

例としてモーダルボックスの表示と非表示を切り替えるフックを取り上げ、カスタムフックを作成してみましょう。

新しい useModal.js ファイルをフックフォルダーに作成し、次のようにコードを記述します。

	import {
    
     ref } from "vue"
	
	export default function useModal() {
    
    
	  const isModalVisible = ref(false)
	  const toggleModal = () => {
    
    
	    isModalVisible.value = !isModalVisible.value
	  }	
	  return {
    
     isModalVisible, toggleModal }
	}

そこでカスタムフックを作成しました

カスタムフックの使用方法

カスタムフックの使用も非常に簡単で、カスタムフックを使用する必要があるコンポーネントに作成したフックコードを import を使用してインポートし、内部のプロパティとメソッドを呼び出すだけです。

上記のように、モーダルボックスを表示および非表示にするフックを定義しました。これを App.vue コンポーネントに直接インポートして使用できます。コードは次のとおりです。

<template>
  {
    
    {
    
     count }}
  <button @click="increment">add</button>
  <br>
  {
    
    {
    
     isModalVisible }}
  <button @click="toggleModal">changeModel</button>
</template>

<script setup>
import useCounter from './hooks/useCounter';
import useModal from './hooks/useModal'
const {
    
     count,increment } = useCounter()
const {
    
     isModalVisible, toggleModal } = useModal()
</script>

<style scoped>
</style>

複雑なシナリオでのフックの使用

実際のアプリケーションでは、カスタムフックの使用は上記の例よりも複雑になり、一般的な使用シナリオにはネットワークリクエストの処理や状態管理が含まれます。また、コードをより適切に維持するために、フックコードフラグメント用のフックフォルダーを作成したことも前述しましたが、Vue3 では、アプリケーションの状態をより適切に維持するために、公式は、できるだけ状態を維持することも推奨しています。フックとロジックを 1 つの側面に分離し、フックファイルを個別に編成して、アプリケーション全体またはモジュールに再利用可能なビジネスロジックを格納します。

次に、特定のネイティブイベントを登録するフックを実装しましょう。

複雑なビジネスロジックを扱う場合、スクロールやサイズ変更などの特定のネイティブイベントを使用する必要がある場合があります。これらのパブリックネイティブイベント処理ロジックをカスタムフックにカプセル化し、それをコンポーネントの特定のプロパティにバインドできます。

たとえば、マウスが複数のページをスクロールするときにscrollTop値を監視する必要がある場合は、フックフォルダーに新しいuseScroll.jsを作成し、次のコードを記述します。

import {
    
     ref,onMounted,onUnmounted} from 'vue'

export default function useScroll() {
    
    
  const scrollTop = ref(0)

  const handleScroll = (e) => {
    
    
    console.log(e);
    scrollTop.value = e.target.documentElement.scrollTop
  }

  onMounted(() => {
    
     
    window.addEventListener('scroll', handleScroll)
  })

  onUnmounted(() => {
    
    
    window.removeEventListener('scroll', handleScroll)
  })

  return {
    
    
    scrollTop
  }
}

次に、scrollTopの値を取得するために必要なコンポーネントにuseScroll.jsを導入し、scrollTopを取得して関連業務を処理します。ここではApp.vueで直接scrollTopを取得してページに表示します。コードは次のとおりです。

<template>
  {
    
    {
    
     count }}
  <button @click="increment">add</button>
  <br>
  {
    
    {
    
     isModalVisible }}
  <button @click="toggleModal">changeModel</button>
  <br>
  <br>
  <div>
    {
    
    {
    
     scrollTop }}
  </div>
 
</template>
<script setup>
import useCounter from './hooks/useCounter';
import useModal from './hooks/useModal'
import useScroll from './hooks/useScroll'
const {
    
     count,increment } = useCounter()
const {
    
     isModalVisible, toggleModal } = useModal()
const {
    
     scrollTop }  = useScroll()
console.log(scrollTop);
</script>
<style scoped>
div {
    
    
  height: 900px;
  scroll-margin-top: 10px;
}
</style>

フックを使用する利点

コンポーネントコードの可読性と保守性を向上させます。
コードロジックを簡素化し、コードの複雑さを軽減します。
「レンダリングプロパティ」や「レンダリングコンポーネント」などの従来の高次コンポーネントパターンの使用を排除します。
ロジックをカプセル化して、コンポーネントを再利用しやすくします。
フックを使用すると、クラスコンポーネントを作成する必要がなく、JavaScript の関数スタイルをより適切に使用し、コードのスケーラビリティを向上させることができます。

つまり、カスタムフックは、アプリケーションのコード構造を最適化し、コードの可読性を向上させるだけでなく、アプリケーションの保守性とスケーラビリティも強化します。Vue3 コンポーネントの実際の開発では、コードの品質とパフォーマンスを向上させながら、ビジネスニーズをより適切に満たすために、カスタムフックをより積極的に使用する必要があります。

さて、vue3 でのカスタムフックの使い方について、今日はここでお話しましょう。気付けばもう 2 時、もう寝ます。気に入ったら、クリックしてください。あなたはお金持ちです。いいね、フォロー、お気に入りに追加してください!

詳細な分析: vue3 でのカスタムフックの使用

目次

フックとは

フックをカスタマイズする方法

カスタムフックの書き方

カスタムフックの使用方法

複雑なシナリオでのフックの使用

フックを使用する利点

おすすめ

詳細な分析: vue3 でのカスタム フックの使用

目次

フックとは

フックをカスタマイズする方法

カスタムフックの書き方

カスタムフックの使用方法

複雑なシナリオでのフックの使用

フックを使用する利点

おすすめ

詳細な分析: vue3 でのカスタムフックの使用