Vue更改数据会导致内存泄漏？

Question

<script>
import { callApi } from "./api";

export default {
  name: "App",
  data: function() {
    return {
      geoJson: {}
    };
  },
  methods: {
    fetchData() {
      callApi().then(res => {
        this.geoJson = res.data;
      });
    }
  }
};
</script>

<template>
  <button @click="fetchData">Fetch data</button>
</template>

每次单击按钮触发器获取数据时，堆内存就会增加。

我检查了没有其他变量指向this.geoJson

不确定是什么原因

谢谢。

codesandbox：https://codesandbox.io/s/stoic-chaplygin-7sj56

Answer 1

堆大小会增加，因为您正在分配驻留在堆上的新对象。就像您提到的那样，该值没有多余的引用，因此当它被覆盖时，旧值变成垃圾（不释放）。尽管在垃圾回收器回收之前它从任何地方都无法访问，但它仍然存在于堆中。

尝试单击Collect Garbage（“记录”按钮附近的垃圾桶图标）以手动触发它，然后看到堆大小再次下降。