WeakMap在Vue组件里怎么用才不会内存泄漏？

Mr.馨冉提问于 2026-03-08 10:59:21 阅读 4

优化

我在Vue组件里想用WeakMap缓存一些DOM节点的元数据，但不确定会不会导致内存泄漏。试了下发现组件卸载后WeakMap里的引用好像还在？

这是我的写法：

<template>
  <div ref="container"></div>
</template>

<script>
export default {
  mounted() {
    const meta = new WeakMap();
    meta.set(this.$refs.container, { id: 'panel-1', visible: true });
    // 存到组件实例上方便后续访问
    this._metaCache = meta;
  },
  beforeUnmount() {
    // 这里需要手动清理吗？
  }
}
</script>

WeakMap不是自动清理的吗？为什么我担心卸载后还占着内存？

我来解答赞 4 收藏

反馈

1 条解答

诸葛保霞 Lv1

WeakMap不会泄漏，你的写法没问题。组件卸载后DOM节点被回收时WeakMap会自动清除对应条目，不用手动清理。

如果还是担心，可以这样写确保清除：

beforeUnmount() {

  this._metaCache.delete(this.$refs.container);

}

但实际没必要，就这样。

2026-03-08 11:01