Memory usage never goes down after map component is unmounted
Opened this issue · 1 comments
Vue 3.5.13
I have a page where I display an address on a map:
<GoogleMap
api-key="myKey"
:center="markers[0].mapCenter"
mapId="myMapId"
ref="jobSiteMap"
:zoom="12"
v-if="jobSite.address !== null && this.addressGeocoded">
<AdvancedMarker
:key="index"
v-for="(m, index) in markers"
:options="{ position: m.mapCenter }" />
</GoogleMap>
<script>
import { GoogleMap, AdvancedMarker } from 'vue3-google-map'
export default {
components: { GoogleMap, AdvancedMarker },
...
watch: {
'jobSite.address': function(newAddress) {
if (newAddress) {
if (this.$store.getters.getGoogleMapsGeocoder === null) {
let geocoder = new google.maps.Geocoder()
this.$store.commit('setGoogleMapsGeocoder', geocoder)
}
this.$store.getters.getGoogleMapsGeocoder.geocode({ address: newAddress }, (results, status) => {
this.markers = []
if (status !== 'OK' || !results[0]) {
throw new Error(status);
}
let marker = {
mapCenter: {
lat: results[0].geometry.location.lat(),
lng: results[0].geometry.location.lng()
}
}
this.markers.push(marker)
this.addressGeocoded = true
})
}
}
}
}
}
The behavior I'm observing is that every time the page is rendered, the browser tab's memory usage goes up, and it does not go back down when I navigate away from the page. Repeatedly navigating away and then back to the page results in a perpetual increase in memory usage.
If I comment out the GoogleMap
component, memory usage remains stable when navigating back and forth:
Similarly, if I never set this.addressGeocoded
to true
(thereby never meeting the v-if
condition on the GoogleMap
component), memory usage doesn't increase:
So there appears to be a memory leak in this library, where its footprint does not get garbage collected. I looked at the source code and saw that clearInstanceListeners
is called inside beforeUnmount
, so I'm not sure what's going on.
I created a demo repository with detailed steps to reproduce the issue.