Navigieren Sie zwischen Seiten mit Leaflet.js + Vue.js – Problem mit Speicherverlust behoben

Question

Ich versuche, eine Vue.js-Anwendung zu erstellen, die viele Leaflet-Karten enthält.

Die folgende jsfiddle ist ein Beispiel für die Anwendung, die ich zu erstellen versuche:

https://jsfiddle.net/RayLa/vr2b6ad7/126/

Die spezifischen Kartenkomponenten sind wie folgt:

const MapComponent = {
  template: '<div id="map">About</div>',
  mounted(){
    let map = L.map('map').setView([51.505, -0.09], 8);
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    
    fetch("https://raw.githubusercontent.com/martinjc/UK-GeoJSON/master/json/administrative/gb/lad.json")
      .then((response) => response.json())
      .then((data) => {
        L.geoJSON(data).addTo(map);
      })
  }
};

Die Anwendung enthält zwei Seiten, eine „Home“-Seite und eine „Karten“-Seite. Die Seite „Karten“ enthält Prospektkarten. Die App sieht so aus:

Das Problem besteht darin, dass beim Navigieren von der Kartenseite zur Startseite und wieder zurück scheinbar ein massiver Speicherverlust vorliegt. In den Chrome-Entwicklertools wird auf der Registerkarte „Speicher“ unten die von der Anwendung beim Start verwendete Speichermenge angezeigt (73,8 MB):

Wenn ich mehrmals von der „Home“-Seite zur „Karte“-Seite klicke, ist die von der Anwendung verwendete Speichermenge wie folgt (739 MB):

Wenn ich ständig zwischen den beiden Seiten klicke, stürzt die App aufgrund von Speichermangel irgendwann ab. Ich kann die Ursache des Speicherverlusts nicht herausfinden.

Wie entlade ich eine Komponente, sodass alle zugehörigen Daten aus dem Speicher gelöscht werden?

Weiß jemand, wie man dieses Problem löst? Ich bin mir nicht sicher, ob das mit Leaflet.js für Vue.js zu tun hat.

Answer 1

我不是 vue 专家，但我很确定问题是你没有正确销毁传单地图。您必须调用 map.remove() (https://leafletjs .com/reference.html#map-remove），否则保存地图的 DOM 节点将保留在内存中，即使您的组件早已消失。

一旦您导航回主页，vue 路由器就会销毁您的 MapComponent，并且您可以使用 destroyed 生命周期挂钩来删除它的传单地图。请参阅此小提琴： https://jsfiddle.net/wuo15b4L/