Vue3 コンポジション API でロジックの再利用を実装する方法

Vue3 コンポジション API でロジックの再利用を実装する方法

Composition API はロジック再利用手順を実装します。

  1. ロジックコードを関数に抽出します。関数コマンドの規則はuseXXX形式です(これはReact Hooksと同じです)。
  2. セットアップで関数 useXXX を参照する

たとえば、現在のマウスの位置を取得するメソッドを定義します。

1 つ目は、ref で定義された useMousePosition を直接使用することです。

このようにして、輸出と輸入の両方を自由に構造化することができる。

// マウスの位置を使用する
'vue' から { ref, onMounted, onUnmounted } をインポートします。

// 1. 関数を定義し、ロジックを抽出し、useXXX という名前を付けます
関数useMousePosition() {
  // ref を使用して定義します const x = ref(0)
  定数y = ref(0)

  関数 update(e) {
    console.log(x.値、y.値);

    x.値 = e.ページX
    y.値 = e.pageY
  }

  マウント時(() => {
    console.log('マウス移動イベントのリッスンを開始します');
    window.addEventListener('mousemove', 更新)
  })

  マウント解除時(() => {
    console.log('マウススクロールイベントの監視を削除します');
    window.removeEventListener('mousemove', 更新)
  })
  戻る {
    ×、 
    ええ
  }
}

 
// この関数をエクスポートする export default useMousePosition
<!-- このメソッドはどのコンポーネントでも呼び出すことができます -->

<テンプレート>
  <p>マウスの位置: {{x}}, {{y}}</p>
</テンプレート>

<スクリプト>
'./useMousePosition' から useMousePosition をインポートします。
エクスポートデフォルト{
  名前: 'MousePosition', 
  設定() {
    // useMousePosition は ref を使用して変数を定義し、分解することができます。const { x, y } = useMousePosition()
    コンソールログ(x, y)
    戻る {
      x, y
    }
  }
}
</スクリプト>

2 番目の方法は、reactive を使用してマウス座標オブジェクトを定義することです。

このエクスポート メソッドは、コンポーネントにインポートするときに構造化解除できません。

'vue' から { onMounted、onUnmounted、reactive } をインポートします。

エクスポート関数useMousePosition2() {
  // reactive を使用して定義します const mouse = reactive({
    x: 0, 
    年: 0
  })

  関数 update(e) {
    マウス.x = e.pageX
    マウス.y = e.pageY
  }

  マウント時(() => {
    console.log('マウス移動イベントのリッスンを開始します');
    window.addEventListener('mousemove', 更新)
  })

  マウント解除時(() => {
    console.log('マウススクロールイベントの監視を削除します');
    window.removeEventListener('mousemove', 更新)
  })

  戻る {
    ねずみ
  }
}
<テンプレート>
  <!-- オブジェクト メソッドを使用して情報を表示します -->
  <p>マウスの位置2: {{mouse.x}}, {{mouse.y}}</p>
</テンプレート>
<スクリプト>
'./useMousePosition' から { useMousePosition2 } をインポートします。
エクスポートデフォルト{
  名前: 'MousePosition', 
  設定() {
    // useMousePosition2 はリアクティブを使用して定義されているため、分解は不可能です const { mouse } = useMousePosition2()
    戻る {
      ねずみ
    }
  }
}
</スクリプト>

3番目の方法はtoRefsを使うことです

このメソッドを使用すると、リアクティブ オブジェクトを ref オブジェクトに分解できます。

エクスポート関数useMousePosition3() {
  // reactive を使用して定義します const mouse = reactive({
    x: 0, 
    年: 0
  })

  関数 update(e) {
    マウス.x = e.pageX
    マウス.y = e.pageY
  }

  マウント時(() => {
    console.log('マウス移動イベントのリッスンを開始します');
    window.addEventListener('mousemove', 更新)
  })

  マウント解除時(() => {
    console.log('マウススクロールイベントの監視を削除します');
    window.removeEventListener('mousemove', 更新)
  })
  
  // ここで、toRefs を使用して ref オブジェクトに分解します。return toRefs(mouse)
}
<テンプレート>
  <p>マウスの位置: {{x}}, {{y}}</p>
</テンプレート>

<スクリプト>
'./useMousePosition' から {useMousePosition3 } をインポートします。
エクスポートデフォルト{
  名前: 'MousePosition', 
  設定() {
    // リアクティブを使用してマウス座標オブジェクトを定義し、toRefs を介してそれを参照オブジェクトに分解します。const { x, y } = useMousePosition()
    コンソールログ(x, y)
    戻る {
      x, y
    }
  }
}
</スクリプト>

3 つの方法はすべて実装できますが、通常使用する場合は ref オブジェクトを返すため、1 番目と 3 番目の方法を使用し、2 番目の方法は使用しないようにすることをお勧めします。

Vue3 コンポジション API でロジック再利用を実現する方法についての記事はこれで終わりです。Vue3 コンポジション API ロジック再利用の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vite2+Vue3を使用してMarkdownドキュメントをレンダリングする練習
  • Vue3ナビゲーションバーコンポーネントのカプセル化実装方法
  • Vue3 Vue イベント処理ガイド
  • Vue3 シングルファイルコンポーネントのスタイル機能の詳細な説明
  • vue3.0+echarts は 3 次元の縦棒グラフを実現します
  • この記事では、Vue 3.0 レスポンシブの使い方を説明します。
  • vue3.2 で追加された defineCustomElement の基本原理の詳細な説明
  • Vue3 + TypeScript 開発の概要
  • Vue3+TypeScriptは再帰メニューコンポーネントの完全な例を実装します
  • Vue3はToDoリストを実装する
  • Vue3+スクリプト設定+ts+Vite+Volarプロジェクト
  • Vue3は画像拡大鏡効果を実現します
  • vue3.0+vant3.0の迅速なプロジェクト構築の実装
  • Vue3 ドキュメント クイックスタート

<<:  Win10にmysql8.0.15 winx64をインストールしてサーバーに接続する際に問題が発生しました

>>:  Centos7 ベースの mysql5.7 のクイックインストールのチュートリアル分析

推薦する

データベース復旧エラーの原因となる MySQL 文字セットの簡単な分析

MySQL の文字セットエンコーディングが正しくないデータをインポートすると、エラーが表示されます。...

ドラッグ効果を実現するための純粋なCSSコード

目次1. ドラッグ効果の例2. CSS実装の原則3. CSS実装の詳細4. CSSレイアウト1. 固...

Vue はインターフェースのスライド効果を実装します

この記事では、インターフェースのスライド効果を実現するためのVueの具体的なコードを例として紹介しま...

Linux カーネル デバイス ドライバー カーネル リンク リストの使用上の注意

/******************** * カーネルにおけるリンクリストの応用********...

ディレクトリスクロール効果を実現するネイティブJS

これはネイティブ JS で実装されたテキスト スクロール効果です。この効果は通常、ニュース、ダイナミ...

Vue3のいくつかの利点についての簡単な説明

目次1. ソースコード1.1 モノレポ1.2 タイプスクリプト2. パフォーマンス2.1 ソースコー...

Centos 用の rpm パッケージのカスタマイズと yum リポジトリの構築に関するチュートリアル

1 yumでソフトウェアをインストールしたときにダウンロードしたrpmパッケージを保存しますyum ...

MySQL の乗算と除算の精度の不一致の問題 (除算後の小数点以下 4 桁)

質問今日、プロジェクト関数を書いていたとき、金額の統計計算を行い、単位を変換する必要がありました。そ...

MySQL データベースのデータ テーブルの最適化、外部キーの分析、3 つのパラダイムの使用

この記事では、例を使用して、MySQL データベースのデータ テーブルの最適化、外部キーの使用、およ...

WebStormはVue3統合APIのソリューションを正しく識別できません

1 問題の説明Vue3 の統合 API は、defineComponent やその他の関数が認識でき...

入力ファイルの制御と美化について

一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると、[ファイルの選択]ダイアロ...

Server-U 14バージョンのインストールと使用方法

Server-Uソフトウェアの紹介Server-U は非常に強力なファイル マネージャーです。FTP...

HTMLを教える記事

アーティストになるつもりがない場合は、開発者として HTML を読んで、必要に応じて簡単な変更を加え...

Vue を使用してモバイル APK プロジェクトを完了することについての簡単な説明

目次基本設定エントリファイル main.jsアプリ.vue表紙ヘッダー検索バー本体当プロジェクトでは...

高性能なウェブサイトのための14のテクニック

オリジナル: http://developer.yahoo.com/performance/rule...