In the following script, this class is used to store a lot of Geojsons object (for google maps api):

    class MapService {
      private layers: Map<string, google.maps.Data> = new Map()

      saveLayer(level: Levels, layer: google.maps.Data) {
        this.layers.set(level, layer)
        return layer
      }
    }
    
    export default MapService

This class is used directly inside a vue3 component:

<script setup>
  const layer = { // Some big object }
  const mapService = new MapService()
  mapService.saveLayer(layer)
</script>

This class is only kept in one place, and used in one route of the product.
I have read a lot about Garbage collection, memory leak … but not really understand everything.

If i open my layer route (and execute saveLayer), go inside another route on the product and open Google chrome inspector memory tab and take a heap snapshot.
I can see that my MapService still exist and have layers inside.
So, i guess, it’s still existing.

Do i need to clear big object before leaving some feature of the product?
For example, doing something like this:

<script setup>
  const layer = { // Some big object }
  const mapService = new MapService()
  mapService.saveLayer(layer)

  onBeforeUnmount(() => {
    mapService.cleanLayer()
  })
</script>


class MapService {
  private layers: Map<string, google.maps.Data> = new Map()
    
  saveLayer(level: Levels, layer: google.maps.Data) {
    this.layers.set(level, layer)
    return layer
  }
  
 cleanLayer() {
   this.layers = null
 }

        
export default MapService

And inside script setup, the mapService variable is attached to the component, so it will automatically throw to garbage collection?