Navigasi antara halaman menggunakan Leaflet.js + Vue.js - isu kebocoran memori diselesaikan

Question

Saya cuba membuat aplikasi Vue.js yang mengandungi banyak peta Risalah.

Jsfiddle berikut ialah contoh aplikasi yang saya cuba buat:

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

Komponen peta khusus adalah seperti berikut:

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

Aplikasi ini mengandungi dua halaman, halaman "Rumah" dan halaman "Peta". Halaman Peta mengandungi peta risalah. Apl kelihatan seperti ini:

Masalahnya ialah apabila saya menavigasi dari halaman Peta ke halaman Utama dan kembali semula, nampaknya terdapat kebocoran memori yang besar. Daripada Alat Pembangun Chrome, di bawah tab Memori, jumlah memori yang digunakan oleh aplikasi semasa permulaan ditunjukkan di bawah (73.8MB):

Apabila saya mengklik beberapa kali dari halaman "Laman Utama" ke halaman "Peta", jumlah memori yang digunakan oleh aplikasi adalah seperti berikut (739MB):

Jika saya terus mengklik antara dua halaman, aplikasi akhirnya ranap kerana kekurangan ingatan. Saya seperti tidak dapat mengetahui punca kebocoran memori.

Bagaimana untuk memunggah komponen supaya semua data berkaitan dikosongkan daripada memori?

Ada sesiapa tahu bagaimana untuk menyelesaikan masalah ini? Saya tidak pasti sama ada ini ada kaitan dengan Leaflet.js untuk Vue.js.

Answer 1

Saya bukan pakar vue, tetapi saya pasti masalahnya ialah anda tidak memusnahkan peta risalah dengan betul. Anda mesti memanggil map.remove() (https://leafletjs .com/reference.html#map-remove), jika tidak, nod DOM yang memegang peta akan kekal dalam ingatan, walaupun komponen anda telah lama hilang.

Sebaik sahaja anda menavigasi kembali ke halaman utama, penghala vue akan memusnahkan MapComponent，并且您可以使用 destroyed cangkuk kitaran hayat anda untuk memadamkan peta risalahnya. Lihat biola ini: https://jsfiddle.net/wuo15b4L/