Leaflet.js + Vue.js를 사용하여 페이지 간 이동 - 메모리 누수 문제 해결

Question

저는 많은 Leaflet 맵이 포함된 Vue.js 애플리케이션을 만들려고 합니다.

다음 jsfiddle은 제가 만들려는 애플리케이션의 예입니다.

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

구체적인 지도 구성요소는 다음과 같습니다:

으아악

애플리케이션에는 "홈" 페이지와 "지도" 페이지의 두 페이지가 있습니다. 지도 페이지에는 전단지 지도가 포함되어 있습니다. 앱은 다음과 같습니다:

문제는 지도 페이지에서 홈 페이지로 이동했다가 다시 돌아갈 때 엄청난 메모리 누수가 발생하는 것 같습니다. Chrome 개발자 도구의 메모리 탭 아래에 시작 시 애플리케이션이 사용하는 메모리 양이 아래와 같이 표시됩니다(73.8MB):

홈 페이지에서 지도 페이지로 여러 번 클릭하면 앱에서 사용하는 메모리 양은 다음과 같습니다(739MB):

두 페이지 사이를 계속 클릭하면 결국 메모리 부족으로 앱이 다운됩니다. 메모리 누수의 원인을 알 수 없는 것 같습니다.

모든 관련 데이터가 메모리에서 지워지도록 구성요소를 언로드하는 방법은 무엇입니까?

이 문제 해결 방법 아시는 분 계신가요? 이것이 Vue.js용 Leaflet.js와 관련이 있는지 잘 모르겠습니다.

Answer 1

저는 Vue 전문가는 아니지만 전단지 지도를 제대로 파괴하지 않는 것이 문제라고 확신합니다. map.remove()(https://leafletjs .com/reference.html#map-remove)을 호출해야 합니다. 그렇지 않으면 구성 요소가 사라진 지 오래되더라도 지도를 보유하고 있는 DOM 노드가 메모리에 남아 있습니다.

홈 페이지로 다시 이동하면 vue 라우터는 MapComponent，并且您可以使用 destroyed 수명 주기 후크를 파괴하여 전단지 맵을 삭제합니다. 이 바이올린을 참조하세요: https://jsfiddle.net/wuo15b4L/