vue2捕获网页中鼠标的位置

<template>
  <div>
    <!-- 鼠标在页面上面滑动，显示x，y的坐标： 通过这个案例，让大家知道组合式api的好处，以及怎么样封装代码 -->
    <div>x: {{mouse.x}}, y: {{mouse.y}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mouse: {
        x: 0,
        y: 0
      }
    }
  },
  mounted() {
    //获取鼠标
    document.addEventListener('mousemove', this.move)
 ;
  },
  destroyed() {
    // 在这个函数里面，一般做一些，事件的解绑，或者清空定时器
    document.removeEventListener('mousemove', this.move)
  },
  methods: {
    move(e) {
      // console.log(e.pageX, e.pageY);
      this.mouse.x = e.pageX
      this.mouse.y = e.pageY
    }
  }
}
</script>

vue3拆分,拆分的文件用.js文件的后缀

<template>
  <div>vue3</div>
  <div>x轴:{{ mouse.x }},y轴:{{ mouse.y }}</div>
</template>

<script setup>
import { useMouse } from './mouse'
 //坐标轴
 const mouse = useMouse()
</script>

用.js做后缀的文件

import { reactive ,onMounted ,onBeforeUnmount} from 'vue';
export function useMouse(){
  const mouse = reactive({
    x:0,
    y:0
  })  
  onMounted(() =>{
    document.addEventListener('mousemove',move)
  })
  // 获取赋值
  const move = (e) =>{
    mouse.x = e.pageX   
    mouse.y = e.pageY
  } 
  // 销毁
  onBeforeUnmount(() =>{
    document.removeEventListener('mousemove',move)  
  })
  return mouse