如何解决 G2 造成的内存泄露

Question

在容器节点被销毁时，应调用 chart.destroy() 以销毁实例释放资源，避免内存泄漏。

内存泄露的基本示例

在一个 Vue 组件中使用 G2 库而没有将其及时清除导致的内存泄漏。假设页面中存在多个标签页，每个标签页都包含一些图表。当选中一个标签页的时候，其他标签页的内容在 DOM 中被移除了。这样，当用户再选中这些标签页的时候，就会发现图表被清空了。本质上，这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加，图表所在的节点也已经不存在了。

这个示例的问题在于 Vue 的相关指令会从 DOM 中移除父级元素，却不会移除由 G2 新添加的 DOM 片段，需要我们手动清除这部分，否则将会导致内存泄漏。

解决这个内存泄漏的问题

在上述的示例中，我们可以在标签页的内容在 DOM 中被移除之前做一些清理工作，来解决内存泄漏问题。为了做到这一点，我们可以将清理工作放入 Vue 的 beforeDestroy() 生命周期钩子里，并会使用 G2 API 中的 destroy() 方法将其清除。

<div class="gcharts2" :id="id"></div>

import { Chart } from '@antv/g2'

export default {
  data () {
    return {
      chart: null,
      charData: [
        { year: '1991', value: 3 },
        { year: '1992', value: 4 },
        { year: '1993', value: 3.5 },
        { year: '1994', value: 5 }
      ]
    }
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  mounted () {
    if (this.id) {
      this.drawChart()
    }
  },
  beforeDestroy () {
    this.chart.destroy()
  },
  methods: {
    drawChart () {
      this.chart = new Chart({
        container: this.id,
        autoFit: true,
        height: 400
      })
      // 此处省略载入图表数据源，使用图形语法进行图表绘制的代码
      this.chart.render()
    }
  }
}

这样做的价值

内存管理和性能测试在快速交付的时候是很容易被忽视的，然而，保持小内存开销仍然对整体的用户体验非常重要。良好的内存管理实践会避免糟糕的浏览器崩溃的场景，同时也解决了潜在的性能恶化问题。

总结

使用 Vue 时需要警惕内存泄漏，这些内存泄漏往往会发生在使用 Vue 之外的其它进行 DOM 操作的三方库（如 G2 图表库）时。请确保测试应用的内存泄漏问题并在适当的时机做必要的组件清理。

正确的做法是，在图表容器被销毁之后，调用 chart.destroy() 销毁实例，在图表容器重新被添加后再次调用 new Chart() 创建 Chart 图表对象。