[Vue warn]: Unhandled error during execution of native event handler

问题出现:

在切换路由的时候出现一堆报错:

[Vue warn]: Unhandled error during execution of native event handler 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="toggle" mode="out-in" > 
  at <RouterView> 
  at <App>

Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
    at handleMouseMove (index.vue:86:30)
    at callWithErrorHandling (chunk-2FDUVFJ5.js?v=729ecf8b:1660:19)
    at callWithAsyncErrorHandling (chunk-2FDUVFJ5.js?v=729ecf8b:1667:17)
    at HTMLDivElement.invoker (chunk-2FDUVFJ5.js?v=729ecf8b:10287:5)

问题分析:

经过仔细查看报错信息,排查问题出现在:

<RouterView v-slot:="{Component}">
    <Transition name="toggle" mode="out-in">
        <component :is="Component"></component>
    </Transition>
</RouterView>

和某个事件处理器之间的冲突,而的这个第二个报错说明是在使用了 getBoundingClientRect  的函数时候的报错.

立马就定位到了这里:

<div id="index-container" @mousemove="handleMouseMove">
</div>

const handleMouseMove = (event)=> {
...
    getBoundingClientRect()
...
}

突然想到,会不会是因为监听的事件没有移除导致的错误,然后查了查,没有@eventHandler 的移除函数,就采用最传统的方法.

问题解决

onMounted(()=>{
    window.addEventListener('mousemove', handleMouseMove)
})
onBeforeUnmount(() => {
    window.removeEventListener('mousemove', handleMouseMove);
})

这样便解决了.