Composition API はロジック再利用手順を実装します。
たとえば、現在のマウスの位置を取得するメソッドを定義します。 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Win10にmysql8.0.15 winx64をインストールしてサーバーに接続する際に問題が発生しました
>>: Centos7 ベースの mysql5.7 のクイックインストールのチュートリアル分析
MySQL の文字セットエンコーディングが正しくないデータをインポートすると、エラーが表示されます。...
目次1. ドラッグ効果の例2. CSS実装の原則3. CSS実装の詳細4. CSSレイアウト1. 固...
この記事では、インターフェースのスライド効果を実現するためのVueの具体的なコードを例として紹介しま...
/******************** * カーネルにおけるリンクリストの応用********...
これはネイティブ JS で実装されたテキスト スクロール効果です。この効果は通常、ニュース、ダイナミ...
目次1. ソースコード1.1 モノレポ1.2 タイプスクリプト2. パフォーマンス2.1 ソースコー...
1 yumでソフトウェアをインストールしたときにダウンロードしたrpmパッケージを保存しますyum ...
質問今日、プロジェクト関数を書いていたとき、金額の統計計算を行い、単位を変換する必要がありました。そ...
この記事では、例を使用して、MySQL データベースのデータ テーブルの最適化、外部キーの使用、およ...
1 問題の説明Vue3 の統合 API は、defineComponent やその他の関数が認識でき...
一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると、[ファイルの選択]ダイアロ...
Server-Uソフトウェアの紹介Server-U は非常に強力なファイル マネージャーです。FTP...
アーティストになるつもりがない場合は、開発者として HTML を読んで、必要に応じて簡単な変更を加え...
目次基本設定エントリファイル main.jsアプリ.vue表紙ヘッダー検索バー本体当プロジェクトでは...
オリジナル: http://developer.yahoo.com/performance/rule...