我正在嘗試制作一個(gè)包含許多 Leaflet 地圖的 Vue.js 應(yīng)用程序。
以下 jsfiddle 是我嘗試創(chuàng)建的應(yīng)用程序的示例:
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); }) } };
該應(yīng)用程序包含兩個(gè)頁面,一個(gè)“主頁”頁面和一個(gè)“地圖”頁面。 “地圖”頁面包含傳單地圖。該應(yīng)用程序如下所示:
問題是當(dāng)我從“地圖”頁面導(dǎo)航到“主頁”頁面并再次返回時(shí),似乎存在大量內(nèi)存泄漏。從 Chrome 開發(fā)者工具的“內(nèi)存”選項(xiàng)卡下,應(yīng)用程序在啟動(dòng)時(shí)使用的內(nèi)存量如下所示(73.8MB):
當(dāng)我從“主頁”頁面點(diǎn)擊多次到“地圖”頁面時(shí),應(yīng)用程序使用的內(nèi)存量如下所示(739MB):
如果我繼續(xù)在兩個(gè)頁面之間單擊,應(yīng)用程序最終會(huì)因?yàn)閮?nèi)存不足而崩潰。 我似乎無法找出內(nèi)存泄漏的原因。
如何卸載組件以便從內(nèi)存中清除所有相關(guān)數(shù)據(jù)?
有誰知道如何解決這個(gè)問題嗎?我不確定這是否與 Leaflet.js 的 Vue.js 有關(guān)。
我不是 vue 專家,但我很確定問題是你沒有正確銷毀傳單地圖。您必須調(diào)用 map.remove()
(https://leafletjs .com/reference.html#map-remove),否則保存地圖的 DOM 節(jié)點(diǎn)將保留在內(nèi)存中,即使您的組件早已消失。
一旦您導(dǎo)航回主頁,vue 路由器就會(huì)銷毀您的 MapComponent
,并且您可以使用 destroyed
生命周期掛鉤來刪除它的傳單地圖。請參閱此小提琴: https://jsfiddle.net/wuo15b4L/