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テーブル構造を変更するコマンドを表示する

簡単な説明エディターはデータベースのエンコードが間違っているために問題に遭遇することが多く、これは頭...

Linux に MySql 5.7.21 をインストールするための詳細な手順

序文Linux で最も広く使用されているデータベースは MySQL です。この記事では、Linux ...

Windows での MySQL インストール チュートリアル (画像とテキスト付き)

MySQL インストール手順 MySQL は、スウェーデンの MySQL AB によって開発された...

Linux 基本チュートリアル: 特別な権限 SUID、SGID、SBIT

序文Linux のファイルまたはディレクトリの権限については、共通の rwx 権限を知っておく必要が...

docker pullがリセットされる問題を解決する

この記事では、docker pull がリセットされる問題を解決する方法を紹介し、皆さんと共有します...

見落としがちなMySQLのCOLLATIONの例の詳細な説明

序文MySQL データベースの文字列型は、CHAR、VARCHAR、BINARY、BLOB、TEXT...

Linux Jenkins 構成スレーブノード実装プロセス図

序文: Jenkins のマスター スレーブ分散アーキテクチャは、主に、Jenkins に単一ポイン...

Flash での HTML と CSS の適用

Flash での HTML と CSS の適用:同僚の Den が Flash で HTML と C...

シンプルな計算機を実装するためのネイティブ js

この記事の例では、参考までに簡単な計算機を実装するためのjsの具体的なコードを共有しています。具体的...

Vueはページdivボックスのドラッグアンドドロップソート機能を実装します

vue は、ページ上の div ボックスのドラッグ アンド ドロップ ソート機能を実装します。 序文...

JavaScript関数の詳細な説明これを指す問題

目次1.関数内のこの方向1. 通常の機能2. コンストラクター3. オブジェクトメソッド4. イベン...

Windows 8.1 で MySQL5.7 のルート パスワードを忘れた場合の解決方法

【背景】最近勉強中に非常に恥ずかしいことに遭遇しました。MySQL のパスワードを忘れてしまい、My...

mysql8.0.11クライアントがログインできない問題の解決方法

この記事では、mysql8.0.11クライアントがログインできない問題の解決策を紹介します。参考まで...

流星効果を実現する JavaScript キャンバス

この記事では、JavaScriptキャンバスで流星の特殊効果を表示するための具体的なコードを参考まで...