摘要

useMouse 是一個經典的組合式函數範例，它封裝了監聽滑鼠移動事件、並回傳滑鼠 X 和 Y 座標的響應式狀態的邏輯。

定義與說明

這個函數會在內部使用 ref 來儲存 x 和 y 座標，並使用 onMounted 來註冊 mousemove 事件監聽器，在 onUnmounted 中移除監聽器以防止記憶體洩漏。它將所有與滑鼠追蹤相關的邏輯都封裝在了一起。

實作範例

useMouse 範例

// composables/useMouse.js
import { ref, onMounted, onUnmounted } from 'vue';
export function useMouse() {
  const x = ref(0);
  const y = ref(0);
  function update(event) {
    x.value = event.pageX;
    y.value = event.pageY;
  }
  onMounted(() => window.addEventListener('mousemove', update));
  onUnmounted(() => window.removeEventListener('mousemove', update));
  return { x, y };
}

<!-- ComponentUsingMouse.vue -->
<script setup>
import { useMouse } from './composables/useMouse.js';
const { x, y } = useMouse();
</script>
<template>
  滑鼠位置: {{ x }}, {{ y }}
</template>

結論

useMouse 完美展示了組合式函數的優點：將一個特定的功能（滑鼠追蹤）的所有相關邏輯（狀態、事件監聽、生命週期管理）都封裝在一個獨立、可複用的單元中。

useMouse 滑鼠追蹤事件監聽