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

// マウスの位置を使用する
'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
    }
  }
}
</スクリプト>

'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()
    戻る {
      ねずみ
    }
  }
}
</スクリプト>

エクスポート関数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
    }
  }
}
</スクリプト>