removeEventListener使用中的bug(vue3)

首先写一个vue3获取鼠标的代码

<template>
    <h2>当前求和为：{{sum}}</h2>
    <button @click="sum++">点我+1</button>
    <hr>
    <h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>
</template>
<script>
    import {ref} from 'vue'
    import usePoint from '../usePoint'
    export default {
        name: 'Demo',
        setup(){
            //数据
            let sum = ref(0)
            let point = usePoint()
            
            //返回一个对象（常用）
            return {sum,point}
        }
    }
</script>

usePoint.js (从这里引入js)

import {reactive,onMounted,onBeforeUnmount} from 'vue'
export default function (){
    //实现鼠标“打点”相关的数据
    let point = reactive({
        x:0,
        y:0
    })
    //实现鼠标“打点”相关的方法
    function savePoint(event){
        point.x = event.pageX
        point.y = event.pageY
        console.log(event.pageX,event.pageY)
    }
    //实现鼠标“打点”相关的生命周期钩子
    onMounted(()=>{
        window.addEventListener('click',savePoint)
    })
    onBeforeUnmount(()=>{
        window.removeEventListener('click',savePoint) // 移除事件函数要对应两个参数,一个是事件,一个是事件对应的回调函数;要将这个回调函数封装,不然他会认为这是一个新的回调函数;(也就是说他删除的将会不是上面那个装载的事件)
    })
    return point
}

在这里我写了一个 window.removeEventListener 准备移除事件
坑1:window.removeEventListener('click') 只写一个参数,无法移除;
坑2:

window.removeEventListener('click',(event)=>{
        point.x = event.pageX
        point.y = event.pageY
        console.log(event.pageX,event.pageY)
    }) 

直接写回调,无法移除    

移除事件函数要对应两个参数,一个是事件,一个是事件对应的回调函数;要将这个回调函数封装,不然他会认为这是一个新的回调函数;(也就是说他删除的将会不是上面那个装载的事件)