Vue subcomponent destroyed, but the subcomponent instance is not destroyed (a deep problem)

problem: execute the destroyed hook function in the Vue sub-component, but the instance does not destroy
to share what you already know:
1. If the vue project assumes that there is only first-level routing (vue-router), then switching the sub-component (specific vue file) in the first-level route will execute the destroyed, in the vue file. At this time, I think this sub-component destroys
2. This in the vue file represents the object of this sub-component. If you switch this subcomponent in each first-level route, new this objects will be created and the this object will be destroyed

.

Experimental scenario: a simple login and home page vue single-page system, the login page and the home page are switched in the first-level route. I wrote the following code in the created hook function of the home page:

clipboard.png

timer polls for this objects every once in a while. When I switch back and forth between login and home page, I will find that this timer prints out multiple this objects. Oh, isn"t that strange? It is obviously destroyed when switching, but why does the destroyed this object exist? What"s wrong with that? That is to say, output the data attribute in the timer, which is a dynamically generated random number when initialized, and you will find that the properties of the same this are composed of multiple contents.

there is also a solution: when you switch back to login, call location.load to refresh and empty. But I really don"t know what the principle is, which leads to an inexplicable anomaly. Let me destroy my values and make me lose my values.

Vue-router vue.js
Oct.25,2021

your problem is that the timer is mounted to the window, and the parameter of the timer is a function, and this function is a closure. The instance object this, is accessed in this closure, so the window references the timer, the timer refers to the function, and the function references the this, timer. If the timer is not unloaded, the this can be traversed by the window object and will not be reclaimed. This is the memory leak caused by the timer.

this is called a memory leak.

if you reference it in the timer, it will never be destroyed. How many times you enter, of course, how many

will it be created for you?

add to the answer on the floor, what you want to destroy is timer

. 
...
mounted() {
    this.timer = setInterval(() => {
        console.log(this);
    }, 30000);
},

destoryed() {
    clearInterval(this.timer);
}

Previous: How can I not read the cache when the browser goes back?

Next: Jquery does not collect other data through the form, and outputs array to the back end.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b36006-2bfd5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b36006-2bfd5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?