Is it necessary to remove the events of the vue component before the component is destroyed?
The source code of
element ui has the following code
mounted() {
this.startTimer();
document.addEventListener("keydown", this.keydown);
},
beforeDestroy() {
document.removeEventListener("keydown", this.keydown);
}
here the previous event ship is removed before the component is destroyed
the official document of vue has a description of destroyed
it is mentioned that all event listeners will be removed, so is there any implication for the event removal in the element source code before the component is destroyed? Is it necessary to remove events from all the event bindings in the
vue component?
must be removed, otherwise the entire component instance cannot be garbage collected, resulting in a memory leak
if the native addEventListeners binding is called, take the initiative to destroy
what you said above are some binding listeners of Vue itself , such as v-model , @ click , @ blur , and so on.
but native document.addEventListener events such as scroll , keydown , keyup . Of course, vue cannot monitor and remove listeners. You can destroy it yourself.
if you don't remove it, you will encounter the question encountered by a buddy I just answered yesterday: uses keep-alive to cache the page, and the other page will execute the method of the previous page? , many pages handle listening events at the same time.
in the past few days, as the encapsulation component has learned a little more about vue, I have some new thoughts on whether the vue binding event needs to be removed.
I think, as stated in the official document, when the component is destroyed, the instance-related events will be destroyed automatically, which is different from the previous respondents' view that the invocation will not be destroyed.
I think. all events mounted on the instance will be destroyed
Let's take a look at the source code of element ui. Event removal is also meaningful here, because this component binds keyboard listening to the entire document when it is mounted, while the destruction of the component only destroys the event related to the instance. If you bind the event to the document or other non-instance-related nodes in the document, you must unlisten, because the event has nothing to do with the instance, so it will not be destroyed automatically.
< hr >
I am sorry to cancel the adoption of the previous respondent, because I am also crazy that some plug-ins have a new understanding that the previously adopted answer is not correct. I adopted my own opinion for the time being. If you have any different suggestions on this topic, you are welcome to continue to discuss it.
