卸载组件时，Vue 3 + Inertia 会自动删除事件侦听器吗？答案

【问题标题】：Does Vue 3 + Inertia remove event listeners automatically when component is unmounted?卸载组件时，Vue 3 + Inertia 会自动删除事件侦听器吗？
【发布时间】：2022-07-27 06:13:06
【问题描述】：

我在script setup 中有一个事件监听器：

<script setup>
import {ref} from 'vue'

const elementRef = ref(null)
    
window.addEventListener('click', (event) => {
    if (!elementRef.value.contains(event.target)){
        console.log('click outside element')
    }
})

</script>


<template>
  <div ref="elementRef">your element</div>
</template>

组件卸载后会被移除还是必须手动移除？

【问题讨论】：

惯性与否，框架不可能知道您在不使用特定于框架的 api 的情况下添加了全局侦听器，您需要自己删除它们。顺便说一句，vueuse 中有 useEventListener 来处理这个

标签： javascript vue.js vuejs3 inertiajs

【解决方案1】：

全局事件侦听器不会自动删除。您应该在mounted 挂钩中添加侦听器，并在unmounted 挂钩中删除它。此外，您需要存储传递给addEventListener 的函数，以便将其传递给removeEventListener：

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const elementRef = ref(null)

const onClick = (event) => {
    if (!elementRef.value.contains(event.target)){
        console.log('click outside element')
    }
}

onMounted(() => window.addEventListener('click', onClick))
onUnmounted(() => window.removeEventListener('click', onClick))
</script>

【讨论】：