Vue2子组件内存泄漏为何引发父组件泄漏？源码相关疑问

一、子组件泄漏牵连父组件的核心原因 #

你观察到的现象确实和$parent引用直接相关：
当子组件因未解绑外部引用（比如你示例中的EventBus事件）导致实例无法被垃圾回收（GC）时，子组件实例上的$parent属性会持续持有父组件的引用。由于GC无法回收被引用的对象，父组件也会因为子组件的这个引用而无法被释放，最终引发父组件的间接内存泄漏。

从你贴出的Vue2 $destroy源码来看，框架只做了从父组件的$children数组中移除当前子组件的操作，但并没有清除子组件实例上的$parent引用。这就意味着只要子组件实例本身被外部（比如EventBus、定时器、全局变量）持有，它指向父组件的引用就会一直存在。

二、Vue2为何不在销毁时切断$parent引用？ #

Vue的这个设计是基于以下几点考量：

• 生命周期钩子的可用性：在组件的destroyed钩子中，开发者仍然可能需要访问$parent来完成一些收尾工作（比如通知父组件清理关联状态）。如果在销毁流程中提前切断$parent引用，会破坏这类合法的使用场景。
• 正常销毁流程下的自动回收：在没有外部引用泄漏的正常场景中，子组件实例会因为失去所有有效引用（父组件$children已移除、DOM已卸载）而被GC自动回收，$parent引用也会随之失效，不需要额外处理。只有当开发者代码出现外部引用未清理的问题时，才会触发这种牵连泄漏，本质上属于业务代码的疏漏。
• 性能与简洁性权衡：为了边缘场景添加额外的引用清理逻辑，会给所有组件的销毁流程带来不必要的性能开销。Vue的设计更倾向于保证正常流程的高效简洁，把边缘场景的内存安全交给开发者（比如正确解绑事件、定时器、第三方库引用等）。

修复你的示例：给子组件添加事件解绑逻辑 #

要解决这个问题，核心是在组件销毁前清理所有外部引用，避免子组件实例被意外持有：

<template>
  <div>son</div>
</template>

<script>
import EventBus from '../EventBus'
export default {
    mounted() {
        EventBus.on('page1son1', this.testFun)
    },
    beforeDestroy() {
        // 销毁前解绑EventBus事件，切断外部引用
        EventBus.off('page1son1', this.testFun)
    },
    methods: {
        testFun() {
            // 你的业务逻辑
        }
    }
}
</script>

内容的提问来源于stack exchange，提问作者gangan1996