Vue修改data引发内存泄漏？点击请求数据堆内存持续上涨

先把你的组件代码整理出来方便分析：

<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，这种情况可以从以下几个方向排查和解决：

1. 检查API调用逻辑中的隐式引用 #

虽然你说没有外部变量引用this.geoJson，但要确认callApi函数内部有没有对响应数据的持久化引用：

• 比如callApi里的请求实例是否开启了缓存，或者有没有把res.data存到全局变量、模块级别的变量中；
• 有没有请求/响应拦截器保留了数据的引用，导致旧的GeoJSON对象无法被垃圾回收。

2. Vue响应式系统的临时持有优化 #

Vue的响应式依赖追踪机制会在数据更新时，暂时保留旧数据的引用（比如Watcher、Dep对象），如果你的GeoJSON是大型复杂对象，这种临时持有可能会让GC回收延迟，看起来像是内存持续上升。

可以尝试在更新数据前先清空旧引用，或者将新数据转为非响应式对象来减少内存开销：

fetchData() {
  // 先清空旧数据引用，帮助GC快速回收
  this.geoJson = null;
  callApi().then(res => {
    // 如果不需要修改geoJson，用Object.freeze冻结对象，减少响应式开销
    this.geoJson = Object.freeze(res.data);
  });
}

3. 排除开发工具的干扰 #

如果你打开了Vue DevTools，它会自动记录组件的状态快照来支持时间旅行调试，这会导致旧的geoJson对象被DevTools持有，无法被GC回收。你可以关闭Vue DevTools后再测试内存变化，看是否恢复正常。

4. 用Chrome DevTools定位内存泄漏 #

最准确的方法是用Chrome的内存分析工具找出未被回收的对象：

• 打开Chrome DevTools的「Memory」面板；
• 点击按钮前，拍摄一次「Heap snapshot」（堆快照）；
• 连续点击几次按钮后，再拍摄一次快照；
• 在对比视图中，查找新增的GeoJSON相关对象，查看它们的引用链，就能定位到是谁在持有这些对象导致无法回收。

如果只是每次请求后短暂的内存上升，之后GC能自动回收，那属于正常现象；但如果内存持续增长不回落，那大概率是某个地方存在未被释放的引用，按上面的步骤排查应该能找到问题。

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