Unmounted components

Questions
1

Forgive me if this was previously answered. It’s my understanding that when a component is unmounted, it is removed from the DOM and the related JS code is removed as well (code between the script tags). I’m not seeing this. When a page is unmounted, I see it’s removed form the DOM but some JS variables are retaining their value so I suspect the code is still present. Shouldn’t it also be removed?

2

when a component is unmounted

  • it is removed from the DOM
  • component won’t call any lifecycle hooks and events, and its instance object will be cleared (e.g. all properties will be removed)

No, JS code due to its nature can not be removed, it will still sit in a memory, and if browser will decide it won’t needed anymore then system garbage collector can remove it from memory

3

Thanks Vladamir for the clarification.

“No, JS code due to its nature can not be removed, it will still sit in a memory, and if browser will decide it won’t needed anymore then system garbage collector can remove it from memory”

So what happens when the page is reentered? Do you reload the script code into a new “new” object?

Here is an example of what I’m seeing.

<script>
let i = 0;

return {
   on: {
      pageInit: function (e, page) {
         console.log(i);
         i = 5;
      },
   }
} 
</script>

When the page is reloaded, console.log writes out 5 not 0. Why?

4

Yes, it is intended behavior, this is how JS scope works. What you have after return is an object with properties which is passed to component constructor which will create new component every time. But the scope is still the same.