使用 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/