Vue组件里父子互相引用会导致内存泄漏吗？

付楠🍀 提问于 2026-03-17 13:59:19 阅读 29

优化

我在写一个弹窗组件，父组件通过 ref 拿到子组件实例，子组件又通过 props 拿到了父组件的引用，页面切换后发现内存占用一直不降，是不是循环引用导致的？试过在 beforeUnmount 里手动置空，但好像没用。

<template>
  <ChildModal ref="modal" :parent="this" />
</template>

<script>
export default {
  methods: {
    open() {
      this.$refs.modal.show();
    }
  }
}
</script>

内存优化循环引用

我来解答赞 4 收藏

反馈

2 条解答

❤小利 Lv1

试试看在 beforeUnmount 里手动断开循环引用，比如 this.$refs.modal.parent = null 和 this.parent = null

2026-03-23 16:23

UI祎芮 Lv1

确实会出问题，你传 this 相当于把整个父组件实例塞给子组件，互相持有引用，GC 根本收不掉。

正确的做法是别传 this，父子通信用 emit，子组件要调父组件方法就暴露特定函数：

<template>

  <ChildModal ref="modal" @open="handleOpen" />

</template>



<script>

export default {

  methods: {

    handleOpen() {

      // 父组件的业务逻辑

    }

  }

}

</script>

子组件：

<script>

export default {

  methods: {

    show() {

      this.visible = true;

      this.$emit('open'); // 通知父组件，别直接调用

    }

  }

}

</script>

如果必须让父组件调子组件方法，用 defineExpose 暴露具体方法，别暴露整个实例。页面切换时 Vue 会自动清理组件，但互相持有引用就GG。

2026-03-17 19:41