使用 Leaflet.js + Vue.js 在頁面之間導航 - 記憶體洩漏問題已解決

Question

我正在嘗試製作一個包含許多 Leaflet 地圖的 Vue.js 應用程式。

以下 jsfiddle 是我嘗試建立的應用程式的範例：

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

具體地圖元件部分如下所示：

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);
      })
  }
};

該應用程式包含兩個頁面，一個「主頁」頁面和一個「地圖」頁面。 「地圖」頁麵包含傳單地圖。該應用程式如下所示：

問題是當我從「地圖」頁面導航到「主頁」頁面並再次返回時，似乎存在大量記憶體洩漏。從 Chrome 開發者工具的「記憶體」標籤下，應用程式在啟動時使用的記憶體量如下所示（73.8MB）：

當我從「主頁」頁面點擊多次到「地圖」頁面時，應用程式使用的記憶體量如下所示（739MB）：

如果我繼續在兩個頁面之間單擊，應用程式最終會因為記憶體不足而崩潰。 我似乎無法找出內存洩漏的原因。

如何卸載元件以便從記憶體中清除所有相關資料？

有誰知道如何解決這個問題嗎？我不確定這是否與 Leaflet.js 的 Vue.js 有關。

Answer 1

我不是 vue 專家，但我很確定問題是你沒有正確銷毀傳單地圖。您必須呼叫map.remove() (https://leafletjs .com/reference.html#map-remove），否則儲存地圖的DOM 節點將保留在記憶體中，即使您的組件早已消失。

一旦您導航回主頁，vue 路由器就會銷毀您的 MapComponent，並且您可以使用 destroyed 生命週期掛鉤來刪除它的傳單地圖。請參閱此小提琴： https://jsfiddle.net/wuo15b4L/

#