vue3 鼠标坐标_vue 鼠标位置

<script setup lang="ts">

import {onMounted,onUnmounted,ref} from "vue"

// Implement ...
function useEventListener(target: Window | HTMLElement, event: string, callback: EventListenerOrEventListenerObject) {


// 注意要移除事件
  onMounted(() => {
    target.addEventListener(event, callback)
  })
	onUnmounted(() => {
    target.removeEventListener(event, callback)
  })

}

// Implement ...
function useMouse() {

  const x = ref(0);
  const y = ref(0);

  useEventListener(window, "mousemove", (event: MouseEvent) => {
    x.value = event.pageX;
    y.value = event.pageY;
  })


  return {x,y}
}
const { x, y } = useMouse()
</script>

<template>Mouse position is at: {{ x }}, {{ y }}</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

在 JavaScript 中，当你使用 addEventListener 方法给一个元素注册事件监听器时，浏览器会在事件发生（例如，用户移动鼠标）时自动调用你指定的回调函数，并传入一个事件对象（如 MouseEvent 对于鼠标事件）作为参数。

在 Vue 或其他现代前端框架中，虽然我们通常不直接调用 addEventListener（因为框架为我们抽象了这部分），但背后的原理相同。当你在 Vue 中监听一个事件时，比如使用 @mousemove=“handleMouseMove”，Vue 内部会帮你注册一个事件监听器，并在事件发生时调用你提供的 handleMouseMove 方法，同时传入事件对象作为参数。

如何判断是否需要使用它们
当你在创建自定义的 Hook 函数时，你应该考虑以下因素来决定是否需要使用 onMounted 和 onUnmounted：

是否与 DOM 直接交互：如果你的 Hook 需要直接与 DOM 交互（例如，添加事件监听器到特定元素），使用这些钩子来确保你的代码在正确的生命周期阶段执行是非常重要的。
资源管理：如果你的 Hook 分配了需要在组件生命周期结束时释放的资源（如事件监听器、定时器、订阅等），你应该使用 onUnmounted 来清理这些资源。
依赖外部条件或设置：如果你的 Hook 依赖于外部的条件或设置，它们可能需要在组件完全挂载后才能正确设置。这种情况下，onMounted 是合适的。