在 Vue 组件中，当我们使用原生的 addEventListener 来监听事件时，组件销毁后这些监听器会自动被清理吗？若不会，背后的原因是什么？
考察说明
考察对 Vue 组件生命周期和原生事件监听器管理的理解。
回答思路
- 【回答框架 1】Vue 组件中的原生 addEventListener 监听器不会在组件销毁时自动移除，因为 Vue 的自动清理机制仅针对模板中使用 v-on 绑定的事件，而原生 addEventListener 属于手动添加的，Vue 无法感知其存在。
- 【回答框架 2】组件销毁时，如果未手动移除原生事件监听器，可能导致内存泄漏，尤其是监听全局对象如 window、document 或外部事件总线时，组件实例虽被销毁，但监听器仍被引用，垃圾回收无法回收，且后续可能错误触发回调。
- 【回答框架 3】正确做法是在 beforeDestroy 或 unmounted 生命周期钩子中，调用 removeEventListener 并将参数与原监听函数保持一致，通常需使用具名函数而非匿名函数以便移除。
- 【回答框架 4】推荐优先使用 Vue 内置的 $on、事件总线或第三方库如 mitt，但若必须使用原生监听，则需确保在适当的生命周期钩子中手动清理。
- 【关键点 1】原生 addEventListener 监听器不会自动移除，需手动清理。
- 【关键点 2】原因：Vue 只管理模板内事件指令，不追踪手动注册的原生监听。
- 【关键点 3】风险：组件销毁后监听器仍存活，导致内存泄漏和意外行为。
- 【关键点 4】解决：使用具名函数并在 beforeDestroy/unmounted 中移除，或尽量使用 Vue 推荐方式。
- 【易错点 1】混淆 v-on 与原生 addEventListener 的清理机制，误以为 Vue 自动处理所有监听。
- 【易错点 2】移除时参数不一致导致移除失败，如匿名函数无法匹配。
- 【易错点 3】遗漏对全局对象监听器的清理，造成严重内存泄漏。