相关疑难解决方法(0)

有没有办法在路线更改时重新渲染组件？我正在使用Vue Router 2.3.0,我在多个路由中使用相同的组件.它第一次工作正常,或者如果我导航到不使用该组件的路由,然后转到那个组件.我正在传递道具的不同之处

{
  name: 'MainMap',
  path: '/',
  props: {
    dataFile: 'all_resv.csv',
    mapFile: 'contig_us.geo.json',
    mapType: 'us'
  },
  folder: true,
  component: Map
},
{
  name: 'Arizona',
  path: '/arizona',
  props: {
    dataFile: 'az.csv',
    mapFile: 'az.counties.json',
    mapType: 'state'
  },
  folder: true,
  component: Map
}

然后我使用道具加载新地图和新数据,但地图保持与首次加载时相同.我不确定发生了什么.

该组件如下所示:

data() {
  return {
    loading: true,
    load: ''
  }
},

props: ['dataFile', 'mapFile', 'mapType'],

watch: {
    load: function() {
        this.mounted();
    }
},

mounted() {
  let _this = this;
  let svg = d3.select(this.$el);

  d3.queue()
    .defer(d3.json, `static/data/maps/${this.mapFile}`)
    .defer(d3.csv, `static/data/stations/${this.dataFile}`) …

如果我加载应用程序并立即拍摄Chrome内存堆快照，则会得到以下结果。

如果单击我的Web应用程序，然后返回到加载的原始页面，并拍摄另一个内存堆快照，则会得到以下结果。

由此可见，现在VueComponents的数量约为10倍，Vue实例的数量也在增加。

这对应用程序的内存使用量有很大的影响。

有哪些工具/方法可用来追踪未被破坏的罪魁祸首？

每当我切换路线时，我注意到我的应用程序中的Vue组件永远不会被破坏，只会被创建（当我在路线之间切换时，＃Deleted列始终为0）。更明确地说，创建的新组件数始终等于该路线上显示的组件数，即，当重新访问路线时，不会销毁任何Vue组件，并且会重新创建该路线上的每个组件。

我一直在研究调试问题，并且我知道以下通常是VueJS中内存泄漏的元凶。

• 使用全局事件总线以及无法注销回调。这在这里清楚地详细说明。虽然在应用程序的某些区域中确实使用了全局事件总线，但是我也没有在全局事件总线上创建任何事件侦听器的页面上遇到内存泄漏，这使我相信这不是问题所在这里。
• 使用第3方库时无法手动清理内存，这是VueJS文档概述的问题。同样，我一直在不使用第三方库的页面上查看内存使用情况，但仍在这些页面上遇到内存泄漏。

我遇到的另一个潜在问题是我不太了解。在这个github线程中，OP关于VueJS中内存泄漏的潜在原因说了以下几点：

所以我确保我不会做任何愚蠢的事情，例如在Vuex商店中存储对此的引用...

有人可以解释一下OP对Vuex和内存泄漏的含义吗？

此外，还有哪些其他潜在问题导致我遗漏的VueJS中的内存泄漏可能会影响我的应用程序？

除了使用Chrome devtools中的“内存”标签以外，我还应该如何调试内存泄漏？